DEV Community: Vishnu C Prasad

Mastering Flutter Streams: Exploring Single and Broadcast Streams

Vishnu C Prasad — Thu, 14 Dec 2023 04:19:48 +0000

Flutter, Google’s UI toolkit, is renowned for its expressive and flexible framework that allows developers to build natively compiled applications for mobile, web, and desktop from a single codebase. One powerful feature in Flutter is the use of streams, which enable efficient and asynchronous communication between different parts of your application. In this article, we’ll delve into the concept of streams in Flutter, specifically focusing on Single and Broadcast Streams. Additionally, we’ll explore the implementation of a custom stream function to deepen our understanding.

Overview of Streams in Flutter

Streams are a fundamental part of the Dart language, and Flutter leverages them to handle asynchronous programming. A stream is a sequence of asynchronous events, and it allows the components of your application to communicate without blocking the execution. Streams are crucial for handling user input, network requests, and other asynchronous tasks in a Flutter application.

In Dart, there are two types of streams: Single Subscription Streams and Broadcast Streams.

Single Subscription Streams

Single Subscription Streams allow only one listener to listen to the stream. Once a listener is subscribed, no other listeners can subscribe to the same stream. It is suitable for scenarios where you want to ensure that only one consumer is processing the stream events.

import 'dart:async';

void main() {
  // Creating a Single Subscription Stream
  StreamController<int> singleController = StreamController<int>();

  // Adding a listener to the stream
  StreamSubscription<int> subscription = singleController.stream.listen(
    (data) {
      print('Received: $data');
    },
  );

  // Adding data to the stream
  singleController.add(1);
  singleController.add(2);
  singleController.add(3);

  // Closing the stream
  singleController.close();
}

Broadcast Streams

On the other hand, Broadcast Streams allow multiple listeners to subscribe to the same stream. This is useful when you want to broadcast events to multiple parts of your application simultaneously.

import 'dart:async';

void main() {
  // Creating a Broadcast Stream
  StreamController<int> broadcastController = StreamController<int>.broadcast();

  // Adding the first listener to the stream
  StreamSubscription<int> subscription1 = broadcastController.stream.listen(
    (data) {
      print('Listener 1 Received: $data');
    },
  );

  // Adding the second listener to the stream
  StreamSubscription<int> subscription2 = broadcastController.stream.listen(
    (data) {
      print('Listener 2 Received: $data');
    },
  );

  // Adding data to the stream
  broadcastController.add(1);
  broadcastController.add(2);
  broadcastController.add(3);

  // Closing the stream
  broadcastController.close();
}

Creating a Custom Stream Function

Now, let’s explore how to implement a custom stream function in Flutter. Suppose we want to create a stream that emits a sequence of Fibonacci numbers. We can achieve this by creating a custom stream function.

import 'dart:async';

// Custom Stream Function to generate Fibonacci numbers
Stream<int> generateFibonacci(int count) async* {
  int a = 0, b = 1;
  for (int i = 0; i < count; i++) {
    yield a;
    int temp = a + b;
    a = b;
    b = temp;
  }
}

void main() async {
  // Creating a custom stream for Fibonacci numbers
  Stream<int> fibonacciStream = generateFibonacci(5);

  // Listening to the custom stream
  await for (int value in fibonacciStream) {
    print('Fibonacci: $value');
  }
}

In this example, the generateFibonacci function returns a stream of Fibonacci numbers based on the specified count. The async* syntax is used to create a generator function that yields values asynchronously. The await for loop is then used to listen to the stream and print the generated Fibonacci numbers.

Conclusion

Understanding streams in Flutter is crucial for developing responsive and efficient applications. By leveraging streams, developers can handle asynchronous events seamlessly. Additionally, creating custom stream functions allows for the implementation of tailored solutions to meet specific application requirements.

As you continue to explore Flutter, experimenting with streams will provide you with a powerful tool-set for building dynamic and interactive applications.

Unveiling the Power of Extensions in Dart and Flutter

Vishnu C Prasad — Tue, 12 Dec 2023 15:41:06 +0000

Flutter, Google’s open-source UI software development toolkit, has gained immense popularity for its ability to create beautiful and natively compiled applications for mobile, web, and desktop from a single codebase. One powerful feature that enhances the expressiveness and readability of Flutter code is extensions. In this article, we will delve into the significance of extensions in Flutter, with detailed examples for a clearer understanding.

Understanding Extensions in Flutter

Extensions in Flutter provide a way to add new functionality to existing classes without modifying their source code. This is particularly useful when working with classes from external libraries or SDKs. Extensions make code more modular, readable, and allow for a more fluent and intuitive API design.

Extensions are declared using the extension keyword and can include methods, getters, and setters. They are then applied to a specific type, enabling you to call these methods directly on instances of that type.

Applying Extensions to BuildContext

BuildContext is a crucial aspect of Flutter, representing the location of a widget in the widget tree. Extending its functionality can lead to more concise and expressive code.

Let’s consider a scenario where we want to create an extension for BuildContext to easily display a snackbar. Here's an example:

// main.dart

import 'package:flutter/material.dart';

// Define an extension for BuildContext
extension CustomSnackbar on BuildContext {
  void showCustomSnackbar(String message) {
    ScaffoldMessenger.of(this).showSnackBar(
      SnackBar(
        content: Text(message),
        duration: Duration(seconds: 2),
      ),
    );
  }
}

// Usage of the extension
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    context.showCustomSnackbar("Hello, Flutter Enthusiasts!");
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: "Text('Flutter Extensions'),"
        ),
        body: Center(
          child: Text('Welcome to Flutter!'),
        ),
      ),
    );
  }
}

In this example, we’ve created an extension named CustomSnackbar on BuildContext. The extension provides a method called showCustomSnackbar that takes a String parameter for the message to be displayed in the snackbar. This extension enhances the BuildContext with a convenient method to show custom snackbars without cluttering the widget tree.

Applying Extensions to String

Extensions can also be applied to basic data types like String, allowing for custom operations or utility functions. Let's create an example of extending String to capitalize the first letter:

// Define an extension for String
extension CapitalizeFirstLetter on String {
  String capitalizeFirst() {
    if (this.isEmpty) return this;
    return this[0].toUpperCase() + this.substring(1);
  }
}

// Usage of the extension
void main() {
  String input = "flutter is amazing";
  String capitalized = input.capitalizeFirst();

  print("Original String: $input");
  print("Capitalized String: $capitalized");
}

In this example, the extension CapitalizeFirstLetter adds a method capitalizeFirst to the String class. This method capitalizes the first letter of the string. Applying this extension results in cleaner and more readable code when dealing with string manipulations.

Benefits of Using Extensions in Flutter

Code Reusability: Extensions promote code reusability by encapsulating functionality that can be applied across different parts of the codebase.
Readability: By encapsulating specific functionality within extensions, the main codebase becomes more readable and focused on the core logic.
Modularity: Extensions encourage modularity, allowing developers to organize and structure their code in a more modular fashion.
API Design: Extensions contribute to better API design by enabling developers to add methods directly to existing classes, resulting in a more intuitive and fluent API.
Third-party Libraries: Extensions are particularly useful when working with third-party libraries or SDKs, as they allow you to add functionality to classes without modifying their source code.

Conclusion

Extension is a powerful feature that enhances the expressiveness and readability of code. By extending classes, developers can create more modular, reusable, and readable code. The examples provided for extending BuildContext for displaying custom snackbars and extending String for capitalizing the first letter showcase the versatility and significance of extensions in Flutter. As you continue to explore Flutter development, consider leveraging extensions to streamline your code and enhance the overall development experience.

Understanding the Significance of the Freezed Package in Flutter

Vishnu C Prasad — Sun, 10 Dec 2023 13:55:43 +0000

Introduction

Flutter, Google’s open-source UI software development toolkit, has gained immense popularity for its ability to create natively compiled applications for mobile, web, and desktop from a single codebase. As developers dive into the Flutter ecosystem, they encounter various tools and packages that enhance productivity and code maintainability. One such package that has become increasingly popular is the Freezed package. In this article, we will explore why developers use the Freezed package in Flutter and how it contributes to more robust and efficient code.

Immutability in Dart

Dart, the programming language used in Flutter development, supports object-oriented programming and provides features like classes and inheritance. However, Dart does not have built-in support for immutable objects. Immutability is a crucial concept in software development as it helps prevent unintended side effects and makes code easier to reason about.

The Need for Immutable Objects

In Flutter applications, maintaining state is a critical aspect of the development process. Immutable objects, once created, cannot be changed. Instead of modifying existing objects, developers create new ones with the desired changes. This approach helps in managing the state of an application more effectively and reduces the chances of bugs caused by unexpected changes.

Introducing Freezed Package

The Freezed package, developed by Rémi Rousselet, provides a solution for generating immutable classes with ease. It is particularly well-suited for working with data models and value objects in Flutter applications. Freezed uses code generation to create boilerplate code for immutable classes, reducing the amount of manual coding required from developers.

Key Features of Freezed

1. freezed Annotation

Developers can annotate their Dart classes with @freezed to instruct the Freezed package to generate the necessary code for immutability.

@freezed
abstract class User with _$User {
  const factory User({
    required String id,
    required String name,
    required int age,
  }) = _User;
}

2. Immutable Classes:

The @freezed annotation generates immutable classes automatically. These classes include methods for equality comparisons (== and hashCode), making them suitable for use in collections and comparisons.

3. Union Classes:

Freezed supports union classes, allowing developers to define a closed set of possible states for a class. This can be especially beneficial in managing application state.

@freezed
abstract class AppState with _$AppState {
  const factory AppState.initial() = _Initial;
  const factory AppState.loading() = _Loading;
  const factory AppState.loaded(List<User> users) = _Loaded;
  const factory AppState.error(String message) = _Error;
}

4. Pattern Matching:

Freezed generates pattern-matching methods for union classes, making it easy to handle different states without the need for boilerplate code.

void handleAppState(AppState state) {
  state.when(
    initial: () => print('Initial state'),
    loading: () => print('Loading state'),
    loaded: (users) => print('Loaded state with ${users.length} users'),
    error: (message) => print('Error state: $message'),
  );
}

5. CopyWith Method

Freezed generates a copyWith method for each class, making it convenient to create copies of objects with modified properties. This is particularly useful when updating the state of an object without changing its original instance.

// Creating an instance of the User class
final user = User(id: '1', name: 'John Doe', age: 25);

// Using copyWith to create a new instance with updated properties
final updatedUser = user.copyWith(name: 'Jane Doe', age: 26);

Advantages of Using Freezed

1. Reduced Boilerplate Code:

Freezed significantly reduces the amount of boilerplate code developers need to write for immutable classes. This leads to cleaner and more maintainable code.

2. Type Safety:

The generated code by Freezed ensures type safety, reducing the possibility of runtime errors related to state changes.

3. Improved Developer Productivity:

With less manual coding and automatic generation of necessary methods, developers can focus more on application logic and features, enhancing overall productivity.

Conclusion

The Freezed package in Flutter addresses the need for immutability in Dart, providing developers with a powerful tool for creating robust and efficient code. By automating the generation of boilerplate code for immutable classes and supporting union classes, Freezed enhances code maintainability and reduces the possibility of bugs related to state management. As Flutter continues to evolve, tools like Freezed contribute to a more streamlined and enjoyable development experience, making it a valuable addition to the toolkit of Flutter developers.

Understanding the BLoC Architectural Pattern in Flutter

Vishnu C Prasad — Sat, 09 Dec 2023 03:27:17 +0000

Introduction:

Flutter, Google’s open-source UI software development toolkit, has gained immense popularity for building natively compiled applications for mobile, web, and desktop from a single codebase. One of the key reasons behind Flutter’s success is its robust and flexible architecture, allowing developers to create high-performance and maintainable applications. One architectural pattern that has become particularly popular in the Flutter community is the BLoC (Business Logic Component) pattern.

What is the BLoC Pattern?

BLoC is an architectural pattern introduced by Google to manage the state of an application and separate the business logic from the UI layer. The main idea behind BLoC is to organize code in a way that promotes reusability, testability, and maintainability. By decoupling the business logic from the UI, developers can create modular and scalable applications

Core Components of BLoC:

1. Business Logic Component (BLoC):

The BLoC is responsible for managing the business logic of the application. It acts as a bridge between the data layer and the presentation layer.
BLoCs are often designed to be reusable, making it easy to plug them into different parts of the application.

2. Events:

Events represent user interactions or any other occurrence that can trigger a change in the application state.
Events are sent to the BLoC, which processes them and may emit new states in response.

3. States:

States represent the different snapshots of the application at a given point in time.
The UI is updated based on the current state of the BLoC, allowing for a reactive and dynamic user interface.

4. Stream:

BLoCs use streams to handle asynchronous data and communication. Streams enable the continuous flow of data between the different layers of the application.

How BLoC Works:

1. Event Triggering:

User interactions or other events trigger the BLoC to process the event and update its internal state.

2. State Transformation:

The BLoC processes events and transitions from one state to another. This transformation is based on the business logic encapsulated within the BLoC.

3. UI Rendering:

The UI layer subscribes to the BLoC’s state changes. When the state changes, the UI is re-rendered accordingly, providing a responsive and dynamic user experience.

Advantages of BLoC Pattern:

1. Unidirectional Data Flow:

BLoC enforces a unidirectional data flow, ensuring that data travels in a single direction through the application. This simplifies the debugging process and makes it easier to understand and maintain the codebase.

2. Reactive Programming:

BLoC heavily relies on reactive programming, where changes in the application state are automatically reflected in the user interface. This is often achieved using streams, a powerful feature in Dart.

3. Separation of Concerns:

BLoC enforces a clear separation between the UI, business logic, and data layers, making code more modular and maintainable.

4. Reusability:

BLoC components can be reused across different parts of the application, promoting code reuse and reducing redundancy.

5. Testability:

BLoC makes it easy to write unit tests for the business logic, ensuring the reliability and correctness of the application.

6. Asynchronous Operations:

BLoC’s use of streams makes it well-suited for handling asynchronous operations, such as network requests and database queries.

Implementing BLoC in Flutter:

1. Bloc Library:

Flutter provides a package called flutter_bloc that simplifies the implementation of the BLoC pattern. This library includes classes and utilities to create BLoCs, handle events, and manage states.

2. BlocBuilder and BlocProvider:

Flutter developers commonly use BlocBuilder and BlocProvider widgets to connect the UI with the BLoC and manage state changes.

3. StreamBuilder:

The StreamBuilder widget is crucial for listening to state changes from the BLoC and rebuilding the UI accordingly.

Conclusion:

The BLoC pattern in Flutter is a powerful tool for managing state and separating concerns in your application. By following this architectural pattern, developers can create scalable, maintainable, and testable Flutter applications. The flexibility of the BLoC pattern makes it suitable for a wide range of applications, from simple counters to complex, data-intensive projects. As you explore Flutter development, consider integrating the BLoC pattern to enhance the structure and maintainability of your codebase.

State Management in Flutter with Bloc and Freezed

Vishnu C Prasad — Fri, 08 Dec 2023 03:11:19 +0000

Introduction

Flutter, Google’s UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase, provides developers with a robust framework for creating beautiful and responsive user interfaces. However, as applications grow in complexity, managing the state becomes a crucial aspect of development. This is where Flutter Bloc and Freezed come into play, offering a powerful combination to streamline state management.

The Challenge of State Management

In any Flutter application, managing state effectively is vital for creating a smooth and responsive user experience. As the complexity of your app increases, handling different states, transitions, and side effects can become challenging. This is where state management solutions like Bloc come in handy.

Understanding Flutter Bloc

Bloc, short for Business Logic Component, is a state management library that helps in organizing and managing the flow of data within a Flutter application. It follows a unidirectional data flow architecture, making it easier to understand and maintain.

Bloc introduces the concept of events, states, and a bloc class. Events represent user actions or interactions, states represent the different states of your application, and the bloc class contains the business logic to handle events and emit new states.

Streamlining with Freezed

Freezed is a code generation package for Dart that helps eliminate boilerplate code when working with immutable classes and unions. When used in conjunction with Flutter Bloc, Freezed reduces the amount of repetitive code, making your application more maintainable and less error-prone.

One of the main features of Freezed is its ability to generate value equality for classes, making it easier to compare instances of these classes without manually implementing the == operator. This is especially useful when working with state classes in Flutter Bloc.

Getting Started

To get started with Flutter Bloc and Freezed, you’ll need to add the necessary dependencies to your pubspec.yaml file:

dependencies:
  flutter_bloc:
  freezed_annotation:

dev_dependencies:
  build_runner:
  freezed:

Once the dependencies are added, you can start defining your state classes using Freezed and integrate them with Flutter Bloc.

Setting up the Bloc

Consider a simple counter example. First, create a folder named counter in the root of your project.

Defining State with Freezed:

Next, create a State class to handle the application state. Within the counter directory define a file named counter_state.dart:

// counter/counter_state.dart

part of 'counter_bloc.dart';

@freezed
class CounterState with _$CounterState {
  const factory CounterState({
    required int counter,
  }) = _CounterState;

  factory CounterState.initial() {
    return const CounterState(
      counter: 0,
    );
  }
}

Defining Event with Freezed:

Next, create a Event class to handle user interactions. Within the counter directory define another file named counter_event.dart:

// counter/counter_event.dart

part of 'counter_bloc.dart';

@freezed
class CounterEvent with _$CounterEvent {
  const factory CounterEvent.incrementButtonPressed() = _IncrementButtonPressed;
  const factory CounterEvent.decrementButtonPressed() = _DecrementButtonPressed;
}

Creating the CounterBloc:

Next, create a Bloc class to handle the business logic. Within the counter directory define another file named counter_bloc.dart:

// counter/counter_bloc.dart

import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:freezed_annotation/freezed_annotation.dart';

part 'counter_event.dart';
part 'counter_state.dart';
part 'counter_bloc.freezed.dart';

class CounterBloc extends Bloc<CounterEvent, CounterState> {
  CounterBloc() : super(CounterState.initial()) {
    on<CounterEvent>((event, emit) {
      event.map(
        incrementButtonPressed: (_) => emit(state.copyWith(
          counter: state.counter + 1,
        )),
        decrementButtonPressed: (_) => emit(state.copyWith(
          counter: state.counter - 1,
        )),
      );
    });
  }
}

Here, Freezed generates the necessary boilerplate code for equality and constructors.

Running the Code Generator:

To generate the code necessary for Freezed, run the following command in your terminal:

flutter pub run build_runner build

This command generates the counter_bloc.freezed.dart file.

Using BlocBuilder in the UI

Now, you can use the BlocProvider and BlocBuilder widgets to connect your Bloc with the UI:

// main.dart

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'counter/counter_bloc.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: BlocProvider(
        create: (context) => CounterBloc(),
        child: const HomeScreen(),
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('Counter App'),
      ),
      body: Center(
        child: BlocBuilder<CounterBloc, CounterState>(
          builder: (context, state) {
            return Text(
              'Counter value: ${state.counter}',
              style: Theme.of(context).textTheme.headlineSmall,
            );
          },
        ),
      ),
      floatingActionButton: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          FloatingActionButton(
            onPressed: () => context
                .read<CounterBloc>()
                .add(const CounterEvent.incrementButtonPressed()),
            tooltip: 'Increment',
            child: const Icon(Icons.add),
          ),
          const SizedBox(width: 16),
          FloatingActionButton(
            onPressed: () => context
                .read<CounterBloc>()
                .add(const CounterEvent.decrementButtonPressed()),
            tooltip: 'Decrement',
            child: const Icon(Icons.remove),
          ),
        ],
      ),
    );
  }
}

The BlocBuilder automatically rebuilds the widget subtree whenever the state of the CounterBloc changes, ensuring your UI stays in sync with the application state.

Conclusion

Combining Flutter Bloc and Freezed provides a powerful solution for state management in Flutter applications. By leveraging the unidirectional data flow of Bloc and eliminating boilerplate code with Freezed, developers can create scalable and maintainable applications with ease. Whether you’re building a simple counter app or a complex business application, Flutter Bloc and Freezed offer a solid foundation for efficient state management.

Applying Dependency Injection in Flutter Using Injectable

Vishnu C Prasad — Thu, 07 Dec 2023 03:50:20 +0000

Dependency injection (DI) is a design pattern that promotes loose coupling and enhances the modularity and testability of your code. In the world of Flutter development, dependency injection becomes a crucial tool for managing the dependencies in a clean and efficient manner. One popular package for implementing dependency injection in Flutter is injectable. In this article, we will explore how to apply dependency injection in Flutter using the injectable package.

What is Dependency Injection?

Dependency injection is a software design pattern where the components of a system are loosely coupled by injecting dependencies rather than hardcoding them within the components. This makes the system more modular, flexible, and easier to test.

In Flutter, dependencies might include services, repositories, or any other classes that a widget relies on to perform its tasks. Instead of creating instances of these dependencies directly within a widget, dependency injection allows us to provide these instances from the outside, making our code more maintainable and scalable.

Using the injectable Package

The injectable package is a powerful and easy-to-use dependency injection package for Flutter. It provides a simple and concise syntax for defining and injecting dependencies. To get started, add the following dependencies to your pubspec.yaml file:

dependencies:
  injectable:  
  get_it:

dev_dependencies:
  injectable_generator:
  build_runner:

Now, run flutter pub get to fetch the dependencies.

Setting up injectable

Once the dependencies are added, you need to set up injectable in your project. Create a new file called injection.dart in your project's root directory. This file will contain the configuration for injectable.

// injection.dart

import 'package:get_it/get_it.dart';
import 'package:injectable/injectable.dart';

import 'injection.config.dart';

final GetIt getIt = GetIt.instance;

@injectableInit
Future<void> configureDependencies(String env) async {
  getIt.init(environment: env);
}

This file initializes the GetIt instance and sets up the necessary configuration for injectable.

Defining Dependencies

Now, let’s define some dependencies. Create a new folder named injections and inside it, create a file named injection_container.dart. This file will contain the configuration for your dependencies.

// injections/injection_container.dart

import 'package:injectable/injectable.dart';

@module
abstract class InjectableModule {
  // Define your dependencies here
  // Example:
  // @lazySingleton
  // YourDependency get yourDependency => YourDependency();
}

In this file, you can define your dependencies using the @lazySingleton, @singleton, @factoryMethod, and other annotations provided by injectable. For example, a simple dependency might look like this:

@lazySingleton
YourDependency get yourDependency => YourDependency();

Generating Code
To generate the necessary code for injectable, run the following command in your terminal:

flutter packages pub run build_runner build --delete-conflicting-outputs

This command triggers the code generation process and generates the necessary files for dependency injection.

Using Dependencies in Widgets

Now that your dependencies are set up, you can use them in your widgets. Import the injection.dart file and call the configureDependencies function in your main.dart file:

// main.dart

import 'package:flutter/material.dart';
import 'package:injectable/injectable.dart';
import 'injection.dart';

void main() {
  configureDependencies(Environment.prod);
  runApp(MyApp());
}

Now, you can use the getIt instance to access your dependencies in any widget:

// example_widget.dart

import 'package:flutter/material.dart';
import 'injection.dart';

class ExampleWidget extends StatelessWidget {
  final YourDependency yourDependency = getIt<YourDependency>();

  @override
  Widget build(BuildContext context) {
    // Use yourDependency here
    return Container();
  }
}

Conclusion

Dependency injection is a powerful pattern that can greatly improve the structure and testability of your Flutter applications. The injectable package provides a convenient way to implement dependency injection in your projects. By separating concerns and promoting modular code, you can create more maintainable and scalable Flutter applications.

Flutter Form Validation Using Flutter Bloc with Freezed in Domain Driven Design Architecture

Vishnu C Prasad — Wed, 06 Dec 2023 14:24:35 +0000

Introduction

In Flutter development, managing form validation is a crucial aspect of building robust applications. When combined with the Flutter Bloc pattern and the Freezed package, it becomes a powerful trio that helps organize, validate, and handle form-related logic efficiently. In this article, we’ll explore how to integrate Flutter Bloc, Freezed annotation, and Domain-Driven Design (DDD) principles to create a clean and maintainable form validation solution in a Flutter application.

NB:

Before diving into the article, I apologize for its length. However, there is no other way to fully explain this topic. At the end of the article, I provide a GitHub repository for reference. Let’s dive in!

Understanding the Components

Flutter Bloc

Flutter Bloc is a state management library that helps developers separate the business logic from the UI layer. It follows the BLoC (Business Logic Component) pattern, where the logic is encapsulated in separate classes and managed by a central authority. This separation enhances code maintainability, testability, and scalability.

Freezed Annotation

Freezed is a code generation library for Dart and Flutter that simplifies the process of creating immutable classes. It utilizes code generation to create boilerplate code for you, reducing redundancy and ensuring immutability, which is crucial for maintaining a predictable state in your application.

Domain-Driven Design (DDD)

DDD is a software design approach that focuses on aligning software design with the business domain. It emphasizes clear separation of concerns, modularization, and a common language between technical and non-technical team members. In the context of form validation, DDD helps organize the validation logic within the domain layer, making it more cohesive and maintainable.

Setting Up the Project

To get started, create a new Flutter project and add the required dependencies to your pubspec.yaml file:

dependencies:
  dartz: ^0.10.1
  flutter:
    sdk: flutter
  flutter_bloc: ^8.1.3
  freezed_annotation: ^2.4.1

dev_dependencies:
  build_runner: ^2.4.6
  flutter_lints: ^2.0.0
  flutter_test:
    sdk: flutter
  freezed: ^2.4.5

Run flutter pub get to install the dependencies.

Defining the Domain

In DDD, the domain layer holds the business logic of your application. Create a domain directory in your project, and within it, define a file named value_failure.dart:

// domain/value_failure.dart

import 'package:freezed_annotation/freezed_annotation.dart';

part 'value_failure.freezed.dart';

@freezed
class ValueFailure<T> with _$ValueFailure<T> {
  const factory ValueFailure.empty({
    required T failedValue,
  }) = _Empty<T>;
  const factory ValueFailure.invalid({
    required T failedValue,
  }) = _Invalid<T>;
}

This value_failure.dart file defines the possible validation failures using the freezed annotation.

Within the domain directory define another file named value_errors.dart:

// domain/value_errors.dart

import 'value_failure.dart';

class UnexpectedValueError extends Error {
  final ValueFailure valueFailure;
  UnexpectedValueError(this.valueFailure);

  @override
  String toString() {
    const errorMessage =
        'Encountered a ValueFailure at an unrecoverable point. Terminating.';
    return Error.safeToString('$errorMessage Failure was: $valueFailure');
  }
}

This value_errors.dart file defines the errors that occur during validation.

Within the domain directory define another file named value_object.dart:

// domain/value_object.dart

import 'package:dartz/dartz.dart';
import 'value_errors.dart';
import 'value_failure.dart';

abstract class ValueObject<T> {
  const ValueObject();
  Either<ValueFailure<T>, T> get value;

  bool isValid() => value.isRight();
  bool isInvalid() => value.isLeft();

  T getOrCrash() => value.fold((f) => throw UnexpectedValueError(f), id);

  Either<ValueFailure<dynamic>, Unit> get failureOrUnit {
    return value.fold((l) => left(l), (_) => right(unit));
  }

  @override
  bool operator ==(Object other) {
    if (identical(this, other)) return true;

    return other is ValueObject<T> && other.value == value;
  }

  @override
  int get hashCode => value.hashCode;

  @override
  String toString() => 'ValueObject(value: $value)';
}

This value_object.dart file establishes the base model for validating values.

Within the domain directory define another file named value_validators.dart:

// domain/value_validators.dart

import 'package:dartz/dartz.dart';
import 'value_failure.dart';

Either<ValueFailure<String>, String> validateStringNotEmpty(String input) {
  if (input.isNotEmpty) {
    return right(input);
  }
  return left(ValueFailure.empty(failedValue: input));
}

Either<ValueFailure<String>, String> validateEmailAddress(String input) {
  const emailRegex =
      r'^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$';
  if (RegExp(emailRegex).hasMatch(input)) {
    return right(input);
  }
  return left(ValueFailure.invalid(failedValue: input));
}

Either<ValueFailure<String>, String> validatePassWord(String input) {
  const passwordRegex =
      r'^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{6,}$';
  if (RegExp(passwordRegex).hasMatch(input)) {
    return right(input);
  }
  return left(ValueFailure.invalid(failedValue: input));
}

This value_validators.dart file defines functions for validating value objects.

Within the domain directory define another file named value_objects.dart:

// domain/value_objects.dart

import 'package:dartz/dartz.dart';
import 'value_failure.dart';
import 'value_object.dart';
import 'value_validators.dart';

class EmailAddress extends ValueObject<String> {
  @override
  final Either<ValueFailure<String>, String> value;
  factory EmailAddress(String input) {
    return EmailAddress._(
      validateStringNotEmpty(input).flatMap(
        validateEmailAddress,
      ),
    );
  }
  const EmailAddress._(this.value);
}

class Password extends ValueObject<String> {
  @override
  final Either<ValueFailure<String>, String> value;
  factory Password(String input) {
    return Password._(
      validateStringNotEmpty(input).flatMap(
        validatePassWord,
      ),
    );
  }
  const Password._(this.value);
}

This value_objects.dart file defines models that inherit the base model ValueObject for validating values.

Creating credentials model

We are planning to validate a sign-in form, so create a directory named auth within the domain directory.

Within the auth directory define file named credentials.dart:

// domain/auth/credentials.dart

import 'package:dartz/dartz.dart';
import 'package:freezed_annotation/freezed_annotation.dart';
import '../value_failure.dart';
import '../value_objects.dart';

part 'credentials.freezed.dart';

@freezed
class Credentials with _$Credentials {
  const Credentials._();

  const factory Credentials({
    required EmailAddress emailAddress,
    required Password password,
  }) = _Credentials;

  factory Credentials.empty() {
    return Credentials(
      emailAddress: EmailAddress(''),
      password: Password(''),
    );
  }

  Option<ValueFailure<dynamic>> get failureOption => emailAddress.failureOrUnit
      .andThen(password.failureOrUnit)
      .fold((f) => some(f), (_) => none());
}

This credentials.dart file defines the model for managing credentials within the state, using the freezed annotation.

Within the auth directory define another file named auth_failure.dart:

import 'package:freezed_annotation/freezed_annotation.dart';

part 'auth_failure.freezed.dart';

@freezed
class AuthFailure with _$AuthFailure {
  const factory AuthFailure.validationFailure() = _ValidationFailure;
}

The file auth_failure.dart utilizes the freezed annotation to define potential failures that may occur during the authentication process.

Creating the SigninForm Bloc

Now, create a bloc that will handle the form-related logic. In the lib directory, create a folder named application, the application layer holds all the bloc’s. Within the application folder create a sub folder named signin_form and within it define a file named signin_form_state.dart:

// application/signin_form/signin_form_state.dart

part of 'signin_form_bloc.dart';

@freezed
class SigninFormState with _$SigninFormState {
  const factory SigninFormState({
    required bool isSubmitting,
    required bool hidePassword,
    required bool showValidationError,
    required Credentials credentials,
    required Option<Either<AuthFailure, Unit>> failureOrSuccessOption,
  }) = _SigninFormState;

  factory SigninFormState.initial() {
    return SigninFormState(
      isSubmitting: false,
      hidePassword: true,
      showValidationError: false,
      credentials: Credentials.empty(),
      failureOrSuccessOption: none(),
    );
  }
}

Within the signin_form folder define another file named signin_form_event.dart:

part of 'signin_form_bloc.dart';

@freezed
class SigninFormEvent with _$SigninFormEvent {
  const factory SigninFormEvent.emailAddressChanged({
    required String emailAddress,
  }) = _EmailChanged;
  const factory SigninFormEvent.passwordChanged({
    required String password,
  }) = _PasswordChanged;
  const factory SigninFormEvent.obscureTextChanged() = _ObscureTextChanged;
  const factory SigninFormEvent.signinButtonPressed() = _SigninButtonPressed;
}

Within the signin_form folder define another file named signin_form_bloc.dart:

import 'package:dartz/dartz.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:freezed_annotation/freezed_annotation.dart';
import '../../domain/auth/auth_failure.dart';
import '../../domain/auth/credentials.dart';
import '../../domain/core/value_objects.dart';

part 'signin_form_event.dart';
part 'signin_form_state.dart';
part 'signin_form_bloc.freezed.dart';

class SigninFormBloc extends Bloc<SigninFormEvent, SigninFormState> {
  SigninFormBloc() : super(SigninFormState.initial()) {
    on<SigninFormEvent>((event, emit) async {
      await event.map(
        emailAddressChanged: (e) async => emit(state.copyWith(
          credentials: state.credentials.copyWith(
            emailAddress: EmailAddress(e.emailAddress),
          ),
          failureOrSuccessOption: none(),
        )),
        passwordChanged: (e) async => emit(state.copyWith(
          credentials: state.credentials.copyWith(
            password: Password(e.password),
          ),
          failureOrSuccessOption: none(),
        )),
        obscureTextChanged: (_) async => emit(state.copyWith(
          hidePassword: !state.hidePassword,
        )),
        signinButtonPressed: (_) async {
          emit(state.copyWith(
            isSubmitting: true,
            failureOrSuccessOption: none(),
          ));

          await Future.delayed(const Duration(seconds: 1));

          if (state.credentials.failureOption.isNone()) {
            return emit(state.copyWith(
              isSubmitting: false,
              failureOrSuccessOption: some(right(unit)),
            ));
          }

          emit(state.copyWith(
            isSubmitting: false,
            showValidationError: true,
            failureOrSuccessOption: some(left(
              const AuthFailure.validationFailure(),
            )),
          ));
        },
      );
    });
  }
}

This bloc contains the form state and methods to handle changes in email and password fields. The signinButtonPressed event performs the validation logic and updates the state accordingly.

Now simply run the generator

Use the [watch] flag to watch the files’ system for edits and rebuild as necessary.

flutter pub run build_runner watch --delete-conflicting-outputs

if you want the generator to run one time and exit, use

flutter pub run build_runner build

Integrating the SigninFormBloc with the UI

Now inside the lib directory create a folder named presentation, the presentation layer holds all the UI elements.

Create the following files in the presentation directory for the UI implementation:

1. presentation/screens/signin_screen.dart

// presentation/screens/signin_screen.dart

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../../../application/signin_form/signin_form_bloc.dart';
import 'widgets/signin_form.dart';

class SigninScreen extends StatelessWidget {
  const SigninScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => SigninFormBloc(),
      child: BlocListener<SigninFormBloc, SigninFormState>(
        listenWhen: (p, c) =>
            p.failureOrSuccessOption != c.failureOrSuccessOption,
        listener: (context, state) {
          state.failureOrSuccessOption.fold(
            () => null,
            (either) => either.fold(
              (f) {
                // Handle failure
              },
              (_) {
                // Handle success
              },
            ),
          );
        },
        child: Scaffold(
          appBar: AppBar(
            title: const Text('SIGN IN'),
          ),
          body: Center(
            child: SizedBox(
              height: 450,
              width: MediaQuery.of(context).size.width - 32,
              child: const Card(
                child: Padding(
                  padding: EdgeInsets.all(16),
                  child: SigninForm(),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

2. presentation/screens/widgets/signin_form.dart

// presentation/screens/widgets/signin_form.dart

import 'package:flutter/material.dart';
import 'email_input_field.dart';
import 'password_input_field.dart';
import 'submit_button.dart';

class SigninForm extends StatelessWidget {
  const SigninForm({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(
          'Sign in',
          style: Theme.of(context).textTheme.headlineLarge?.copyWith(
                fontWeight: FontWeight.bold,
                color: Colors.deepPurple,
              ),
        ),
        const EmailInputField(),
        const PasswordInputField(),
        const SubmitButton()
      ],
    );
  }
}

3. presentation/screens/widgets/email_input_field.dart

// presentation/screens/widgets/email_input_field.dart

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../../../../application/signin_form/signin_form_bloc.dart';

class EmailInputField extends StatelessWidget {
  const EmailInputField({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    final controller = TextEditingController();
    return BlocConsumer<SigninFormBloc, SigninFormState>(
      listenWhen: (p, c) => p.showValidationError != c.showValidationError,
      listener: (context, state) {
        controller.text =
            state.credentials.emailAddress.value.getOrElse(() => '');
      },
      builder: (context, state) {
        return TextFormField(
          controller: controller,
          autovalidateMode: state.showValidationError
              ? AutovalidateMode.always
              : AutovalidateMode.disabled,
          decoration: InputDecoration(
            border: OutlineInputBorder(
              borderSide: const BorderSide(color: Colors.deepPurple),
              borderRadius: BorderRadius.circular(10),
            ),
            hintText: 'Type email address',
            labelText: 'Email address',
            prefixIcon: const Icon(
              Icons.email,
              color: Colors.deepPurple,
            ),
          ),
          onChanged: (email) => context
              .read<SigninFormBloc>()
              .add(SigninFormEvent.emailAddressChanged(emailAddress: email)),
          validator: (_) => context
              .read<SigninFormBloc>()
              .state
              .credentials
              .emailAddress
              .value
              .fold(
                (l) => l.map(
                  empty: (_) => "Email address can't be empty.",
                  invalid: (_) => "Invalid email address.",
                ),
                (_) => null,
              ),
        );
      },
    );
  }
}

4. presentation/screens/widgets/password_input_field.dart

// presentation/screens/widgets/password_input_field.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../../../../application/signin_form/signin_form_bloc.dart';

class PasswordInputField extends StatelessWidget {
  const PasswordInputField({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    final controller = TextEditingController();
    return BlocConsumer<SigninFormBloc, SigninFormState>(
      listenWhen: (p, c) => p.showValidationError != c.showValidationError,
      listener: (context, state) {
        controller.text = state.credentials.password.value.getOrElse(() => '');
      },
      builder: (context, state) {
        return TextFormField(
          controller: controller,
          autovalidateMode: state.showValidationError
              ? AutovalidateMode.always
              : AutovalidateMode.disabled,
          decoration: InputDecoration(
            errorMaxLines: 3,
            border: OutlineInputBorder(
              borderSide: const BorderSide(color: Colors.deepPurple),
              borderRadius: BorderRadius.circular(10),
            ),
            hintText: 'Type password',
            labelText: 'Password',
            prefixIcon: const Icon(
              Icons.lock,
              color: Colors.deepPurple,
            ),
            suffixIcon: IconButton(
              onPressed: () => context
                  .read<SigninFormBloc>()
                  .add(const SigninFormEvent.obscureTextChanged()),
              icon: Icon(
                state.hidePassword
                    ? CupertinoIcons.eye
                    : CupertinoIcons.eye_slash,
                color: Colors.deepPurple,
              ),
            ),
          ),
          obscureText: state.hidePassword,
          onChanged: (password) => context
              .read<SigninFormBloc>()
              .add(SigninFormEvent.passwordChanged(password: password)),
          validator: (_) => context
              .read<SigninFormBloc>()
              .state
              .credentials
              .password
              .value
              .fold(
                (l) => l.map(
                  empty: (_) => "Password can't be empty",
                  invalid: (_) =>
                      'Password must be minimum six characters, at least one uppercase letter, one lowercase letter, one number and one special character',
                ),
                (r) => null,
              ),
        );
      },
    );
  }
}

5. presentation/screens/widgets/submit_button.dart

// presentation/screens/widgets/submit_button.dart

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../../../../application/signin_form/signin_form_bloc.dart';

class SubmitButton extends StatelessWidget {
  const SubmitButton({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<SigninFormBloc, SigninFormState>(
      builder: (context, state) {
        return SizedBox(
          width: double.infinity,
          height: 50,
          child: ElevatedButton(
            style: ButtonStyle(
              backgroundColor: const MaterialStatePropertyAll<Color>(
                Colors.deepPurple,
              ),
              shape: MaterialStatePropertyAll<RoundedRectangleBorder>(
                RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
              ),
            ),
            onPressed: () => context
                .read<SigninFormBloc>()
                .add(const SigninFormEvent.signinButtonPressed()),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                state.isSubmitting
                    ? const SizedBox(
                        height: 16,
                        width: 16,
                        child: CircularProgressIndicator(
                          color: Colors.white,
                        ),
                      )
                    : const Icon(
                        Icons.login,
                        color: Colors.white,
                      ),
                Text(
                  state.isSubmitting ? 'Signing in...' : 'Sign in',
                  style: Theme.of(context).textTheme.bodyLarge?.copyWith(
                        color: Colors.white,
                        fontWeight: FontWeight.bold,
                      ),
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}

We use the BlocProvider to provide the SigninFormBloc to the widget tree and BlocConsumer to listen to and rebuild the UI based on state changes.

Conclusion

In this article, we explored how to leverage Flutter Bloc and Freezed annotation to implement form validation in a Flutter application following Domain-Driven Design principles. This approach enhances code organization, readability, and maintainability. As your application grows, the separation of concerns provided by these tools will become even more valuable, allowing you to easily extend and modify your form validation logic. Consider exploring additional features, such as dependency injection and testing, to further enhance the robustness of your Flutter application.

Here’s a link to a sample project repository for a more concrete demonstration of the topic discussed in this article: Github Repo ➡️

Implementing the CQRS Pattern in NestJS with a Note API Example

Vishnu C Prasad — Sun, 20 Aug 2023 06:30:14 +0000

In the world of software architecture, designing systems that are scalable, maintainable, and efficient is a paramount concern. One architectural pattern that has gained traction for achieving these goals is the Command Query Responsibility Segregation (CQRS) pattern. CQRS is particularly useful for applications that require complex data manipulation and querying. In this article, we’ll explore how to implement the CQRS pattern in a NestJS application by creating a Note API example.

Understanding the CQRS Pattern

CQRS is an architectural pattern that separates the responsibilities of handling read and write operations in a system. It recognizes that the requirements for reading data are often different from those for writing data. By segregating these responsibilities, CQRS allows for optimizing the read and write paths independently, leading to improved performance, scalability, and maintainability.

In a CQRS-based architecture, there are two main components: the Command side and the Query side.

Command Side: This side is responsible for handling write operations such as creating, updating, and deleting data. It uses commands to trigger changes in the application’s state.
Query Side: This side is responsible for handling read operations. It focuses on delivering data in a format that is optimized for querying and displaying, without concerns about the underlying data storage or manipulation logic.

Implementing CQRS in NestJS

NestJS is a popular Node.js framework that provides a solid foundation for building scalable and maintainable server-side applications. To implement the CQRS pattern in NestJS, we’ll use the @nestjs/cqrs package, which provides tools and decorators for managing commands, events, and queries.

Let’s walk through the implementation of a Note API using CQRS in NestJS.

Step 1: Setting Up the Project

First, create a new NestJS project if you haven’t already:



nest new note-api-cqrs

Navigate to the project directory:



cd note-api-cqrs

Step 2: Installing Dependencies

Install the required dependencies for CQRS and other functionalities:



npm install --save @nestjs/cqrs

Step 3: Creating Commands, Events, and Queries

In CQRS, commands represent actions that modify the application’s state, events represent things that have happened in the past, and queries represent requests for information. Let’s create these components for our Note API.

Create a notes module:



nest generate module notes

Step 4: Creating Command

Inside the notes module, create a create-note.command.ts file and implement the create note command.



export class CreateNoteCommand {
  constructor(public readonly title: string, public readonly content: string) {}
}

Step 5: Creating Query

Inside the notes module, create a get-notes.query.ts file and implement the get notes query.



export class GetNotesQuery {}

Step 6: Implementing Command Handlers

Create a create-note.handler.ts file and implement the command handler:



import { CommandHandler, ICommandHandler } from '@nestjs/cqrs';
import { CreateNoteCommand } from './create-note.command';
import { NoteCreatedEvent } from '../events/note-created.event';

@CommandHandler(CreateNoteCommand)
export class CreateNoteHandler implements ICommandHandler<CreateNoteCommand> {
  async execute(command: CreateNoteCommand): Promise<void> {
    // Here, you can perform the necessary logic to create a new note
    const { title, content } = command;

    // Simulate note creation
    const noteId = Math.random().toString(36).substring(7);

    // Emit a NoteCreatedEvent
    const event = new NoteCreatedEvent(noteId, title, content);
    event.commit();
  }
}

Step 7: Implementing Query Handlers

Create aget-notes.handler.ts file and implement the query handler:



import { IQueryHandler, QueryHandler } from '@nestjs/cqrs';
import { GetNotesQuery } from './get-notes.query';

@QueryHandler(GetNotesQuery)
export class GetNotesHandler implements IQueryHandler<GetNotesQuery> {
  async execute(query: GetNotesQuery): Promise<any> {
    // Here, you can retrieve notes data for querying
    // For demonstration purposes, let's return a mock list of notes
    return [
      { id: 1, title: 'Note 1', content: 'Content of note 1' },
      { id: 2, title: 'Note 2', content: 'Content of note 2' },
    ];
  }
}

Step 8: Wiring Everything Together

In the notes.module.ts file, configure the CQRS module to use the command handlers and query handlers:



import { Module } from '@nestjs/common';
import { CqrsModule } from '@nestjs/cqrs';
import { NotesController } from './notes.controller';
import { CreateNoteHandler } from './commands/create-note.command';
import { NoteCreatedHandler } from './events/note-created.event';
import { GetNotesHandler } from './queries/get-notes.query';

@Module({
  imports: [CqrsModule],
  controllers: [NotesController],
  providers: [CreateNoteHandler, GetNotesHandler],
})
export class NotesModule {}

Step 9: Creating the Notes Controller

In the notes.controller.ts file, create a controller to handle the API requests:



import { Controller, Get, Post, Body } from '@nestjs/common';
import { CommandBus, QueryBus } from '@nestjs/cqrs';
import { CreateNoteCommand } from './commands/create-note.command';
import { GetNotesQuery } from './queries/get-notes.query';

@Controller('notes')
export class NotesController {
  constructor(
    private readonly commandBus: CommandBus,
    private readonly queryBus: QueryBus,
  ) {}

  @Post()
  async createNote(@Body() body: { title: string, content: string }): Promise<void> {
    const { title, content } = body;
    await this.commandBus.execute(new CreateNoteCommand(title, content));
  }

  @Get()
  async getNotes(): Promise<any[]> {
    return this.queryBus.execute(new GetNotesQuery());
  }
}

Step 10: Running the Application

Finally, start the NestJS application:



npm run start:dev

Your Note API with the CQRS pattern is now up and running! You can use tools like curl, Postman, or other API testing tools to interact with the API.

Conclusion

The CQRS pattern is a powerful way to achieve separation of concerns in applications by segregating read and write operations. With the help of the @nestjs/cqrs package, implementing the CQRS pattern in a NestJS application becomes straightforward. By using commands and queries, you can efficiently handle complex data manipulation and querying scenarios while maintaining scalability and maintainability.

Here’s a link to a sample project repository for a more concrete demonstration of the concepts discussed in this article: Github Repo

Establishing PostgreSQL Connection with TypeORM in NestJS

Vishnu C Prasad — Sat, 19 Aug 2023 05:59:22 +0000

In the world of modern web development, building scalable and efficient applications requires a solid foundation in managing databases. PostgreSQL is a powerful open-source relational database management system that is widely used for its performance and reliability. When combined with the TypeORM library in a NestJS application, it becomes a potent combination for managing database connections and interactions. This article will guide you through the process of establishing a PostgreSQL connection using TypeORM within a NestJS setup, including setting up a PostgreSQL database using Docker and creating a Poll API example.

Prerequisites

Before we dive into the details, make sure you have the following tools and technologies installed on your system:

Node.js and npm: To run the NestJS application.
Docker: For setting up a PostgreSQL database in a Docker container.
Nest CLI: To generate and manage your NestJS application.

Step 1: Create a NestJS Application

Let’s start by creating a new NestJS application. Open your terminal and execute the following command:



nest new poll-api

Navigate to the project directory:



cd poll-api

Step 2: Install TypeORM and PostgreSQL Package

TypeORM is a popular Object-Relational Mapping (ORM) library for TypeScript and JavaScript. It simplifies database operations by allowing developers to interact with databases using TypeScript classes and decorators.

Install TypeORM and the PostgreSQL driver as project dependencies:



npm install @nestjs/typeorm typeorm pg

Step 3: Set Up a PostgreSQL Database Using Docker

Docker is an essential tool for creating isolated development environments. We will use Docker to set up a PostgreSQL database server for our NestJS application.

Create a docker-compose.yml file in the root directory of your project:



version: '3.7'
services:
  postgres:
    image: postgres:13
    container_name: postgres_db
    ports:
      - '5432:5432'
    environment:
      POSTGRES_DB: poll_db
      POSTGRES_USER: poll_user
      POSTGRES_PASSWORD: poll_password
    volumes:
      - postgres_data:/var/lib/postgresql/data
volumes:
  postgres_data:

This Docker Compose configuration sets up a PostgreSQL container named postgres_db with a database named poll_db, a user named poll_user, and the associated password.

Run the PostgreSQL container using Docker Compose:



docker compose up -d

Step 4: Configure TypeORM Connection

Open the src/app.module.ts file and configure the TypeORM connection. Import the necessary modules and configure the TypeOrmModule.forRoot() method with the PostgreSQL connection options:



import { Module } from '@nestjs/common';
import { TypeOrmModule } from '@nestjs/typeorm';

@Module({
  imports: [
    TypeOrmModule.forRoot({
      type: 'postgres',
      host: 'localhost',
      port: 5432,
      username: 'poll_user',
      password: 'poll_password',
      database: 'poll_db',
      entities: [],
      synchronize: true,
    }),
  ],
})
export class AppModule {}

Step 5: Create a Poll Entity

Create a poll.entity.ts file in the src/poll directory. Define the Poll entity using TypeORM decorators:



import { Entity, PrimaryGeneratedColumn, Column } from 'typeorm';

@Entity()
export class Poll {
  @PrimaryGeneratedColumn()
  id: number;

  @Column()
  question: string;

  @Column('jsonb', { nullable: true })
  options: string[];
}

Step 6: Create a Poll Service

Create a poll.service.ts file in the src/poll directory. Implement the PollService class, which will be responsible for interacting with the database:



import { Injectable } from '@nestjs/common';
import { InjectRepository } from '@nestjs/typeorm';
import { Repository } from 'typeorm';
import { Poll } from './poll.entity';

@Injectable()
export class PollService {
  constructor(
    @InjectRepository(Poll)
    private readonly pollRepository: Repository<Poll>,
  ) {}

  async createPoll(question: string, options: string[]): Promise<Poll> {
    const poll = this.pollRepository.create({ question, options });
    return this.pollRepository.save(poll);
  }

  async getAllPolls(): Promise<Poll[]> {
    return this.pollRepository.find();
  }
}

Step 7: Create a Poll Controller

Create a poll.controller.ts file in the src/poll directory. Implement the PollController class, which will handle incoming HTTP requests related to polls:



import { Controller, Get, Post, Body } from '@nestjs/common';
import { PollService } from './poll.service';

@Controller('polls')
export class PollController {
  constructor(private readonly pollService: PollService) {}

  @Post()
  createPoll(@Body() { question, options }: { question: string; options: string[] }) {
    return this.pollService.createPoll(question, options);
  }

  @Get()
  getAllPolls() {
    return this.pollService.getAllPolls();
  }
}

Step 8: Configure Module

Open the src/app.module.ts file again and import the PollController and PollService.



import { Module } from '@nestjs/common';
import { TypeOrmModule } from '@nestjs/typeorm';
import { Poll } from './poll/poll.entity';
import { PollService } from './poll/poll.service';
import { PollController } from './poll/poll.controller';

@Module({
  imports: [
    TypeOrmModule.forRoot({
      // ... (previous TypeORM config)
      entities: [Poll],
      synchronize: true,
    }),
    TypeOrmModule.forFeature([Poll]),
  ],
  providers: [PollService],
  controllers: [PollController],
})
export class AppModule {}

Step 9: Test the API

Start the NestJS application by running the following command:



npm run start:dev

You can now access the API endpoints using tools like curl or Postman:

Create a poll: POST http://localhost:3000/polls
Request Body:



{
  "question": "What's your favorite programming language?",
  "options": ["JavaScript", "Python", "Java", "C++"]
}

Get all polls: GET http://localhost:3000/polls

Conclusion

In this detailed guide, we have learned how to establish a PostgreSQL connection using TypeORM within a NestJS application. We set up a PostgreSQL database using Docker, defined a Poll entity, created a Poll service, and implemented API endpoints to create and retrieve polls. This foundation provides a strong basis for building more complex and feature-rich applications using the NestJS framework, PostgreSQL, and TypeORM.

Here’s a link to a sample project repository for a more concrete demonstration of the concepts discussed in this article: Github Repo

Passport JWT Authentication in NestJS

Vishnu C Prasad — Fri, 18 Aug 2023 02:33:18 +0000

Passport is a popular authentication middleware for Node.js that provides various authentication strategies, including JWT (JSON Web Token) authentication. NestJS is a powerful framework for building scalable and maintainable server-side applications with TypeScript. In this article, we will explore how to implement JWT authentication using Passport in a NestJS application.

Prerequisites

Before we begin, make sure you have the following prerequisites installed:

Node.js and npm
Nest CLI
MongoDB

Setting Up the NestJS Project

Let’s start by creating a new NestJS project. Open your terminal and run the following command:

nest new nest-jwt-auth-example

Navigate into the project directory:

cd nest-jwt-auth-example

Installing Dependencies

To implement JWT authentication using Passport and Mongoose, we need to install the necessary packages:

npm install @nestjs/jwt @nestjs/passport passport passport-jwt mongoose @nestjs/mongoose

Setting Up Mongoose

First, let’s set up Mongoose to connect to your MongoDB database. Open the app.module.ts file and configure the MongooseModule:

import { Module } from '@nestjs/common';
import { MongooseModule } from '@nestjs/mongoose';
import { AppController } from './app.controller';
import { AppService } from './app.service';

@Module({
  imports: [
    MongooseModule.forRoot('mongodb://127.0.0.1:27017/nest-jwt-auth', {
      useNewUrlParser: true,
      useUnifiedTopology: true,
    }),
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

Replace the connection URL with your MongoDB connection string.

Creating User Schema

Let’s create a user schema using Mongoose. Create a new file named user.schema.ts in a folder named user inside the src directory:

import { Prop, Schema, SchemaFactory } from '@nestjs/mongoose';
import { ObjectId } from 'mongodb';

@Schema()
export class User {
  @Prop({ required: true })
  username: string;

  @Prop({ required: true })
  password: string;
}

export type UserDocument = User & Document;

export const UserSchema = SchemaFactory.createForClass(User);

Creating User Module

Now, create a user module to manage user-related operations. Run the following command to generate a new module, service, and controller:

nest generate module user
nest generate service user
nest generate controller user

In the user.service.ts file, implement methods for user registration and fetching users:

import { Injectable } from '@nestjs/common';
import { InjectModel } from '@nestjs/mongoose';
import { Model } from 'mongoose';
import { User, UserDocument } from './user.schema';

@Injectable()
export class UserService {
  constructor(@InjectModel(User.name) private userModel: Model<UserDocument>) {}

  async create(username: string, password: string): Promise<User> {
    const user = new this.userModel({ username, password });
    return user.save();
  }

  async findByUsername(username: string): Promise<User | null> {
    return this.userModel.findOne({ username }).exec();
  }

  async findById(id: string): Promise<User | null> {
    return this.userModel.findById(id).exec();
  }
}

Setting Up Passport and JWT Strategy

Next, let’s configure Passport and set up the JWT strategy. Open the auth.module.ts file and create the JWT strategy:

import { Module } from '@nestjs/common';
import { JwtModule } from '@nestjs/jwt';
import { PassportModule } from '@nestjs/passport';
import { JwtStrategy } from './jwt.strategy';
import { AuthService } from './auth.service';
import { UserModule } from '../user/user.module';

@Module({
  imports: [
    PassportModule,
    JwtModule.register({
      secret: 'yourSecretKey', // Replace with your own secret key
      signOptions: { expiresIn: '1h' }, // Token expiration time
    }),
    UserModule,
  ],
  providers: [AuthService, JwtStrategy],
  exports: [JwtModule],
})
export class AuthModule {}

Implementing JWT Strategy

Create a file named jwt.strategy.ts in the auth folder and implement the JWT strategy:

import { Injectable, UnauthorizedException } from '@nestjs/common';
import { PassportStrategy } from '@nestjs/passport';
import { Strategy, ExtractJwt } from 'passport-jwt';
import { UserService } from '../user/user.service';
import { User } from '../user/user.schema';

@Injectable()
export class JwtStrategy extends PassportStrategy(Strategy) {
  constructor(private userService: UserService) {
    super({
      jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(),
      secretOrKey: 'yourSecretKey', // Replace with your own secret key
    });
  }

  async validate(payload: any): Promise<User> {
    const user = await this.userService.findById(payload.sub);
    if (!user) {
      throw new UnauthorizedException();
    }
    return user;
  }
}

Implementing Auth Service

Create an auth folder inside the src directory. Inside the auth folder, create auth.service.ts:

import { Injectable } from '@nestjs/common';
import { JwtService } from '@nestjs/jwt';
import { UserService } from '../user/user.service';
import { User } from '../user/user.schema';

@Injectable()
export class AuthService {
  constructor(
    private userService: UserService,
    private jwtService: JwtService,
  ) {}

  async validateUser(username: string, password: string): Promise<User | null> {
    const user = await this.userService.findByUsername(username);
    if (user && user.password === password) {
      return user;
    }
    return null;
  }

  async login(user: User): Promise<{ accessToken: string }> {
    const payload = { sub: user._id };
    return {
      accessToken: this.jwtService.sign(payload),
    };
  }
}

Creating Auth Controller

Generate an auth controller by running the following command:

nest generate controller auth

In the auth.controller.ts file, implement the authentication endpoints:

import { Controller, Post, Request, UseGuards } from '@nestjs/common';
import { AuthGuard } from '@nestjs/passport';
import { AuthService } from './auth.service';

@Controller('auth')
export class AuthController {
  constructor(private authService: AuthService) {}

  @Post('login')
  async login(@Request() req): Promise<any> {
    const user = req.user;
    const token = await this.authService.login(user);
    return { token };
  }

  @Post('register')
  async register(@Request() req): Promise<any> {
    const { username, password } = req.body;
    const user = await this.authService.register(username, password);
    return { user };
  }
}

Protecting Routes with AuthGuard

To protect routes with JWT authentication, use the AuthGuard provided by Passport. Open the app.controller.ts file and add the UseGuards decorator:

import { Controller, Get, Request, UseGuards } from '@nestjs/common';
import { AuthGuard } from '@nestjs/passport';

@Controller()
export class AppController {
  @Get('profile')
  @UseGuards(AuthGuard())
  getProfile(@Request() req) {
    return req.user;
  }
}

Testing the Endpoints

Start your NestJS application:

npm run start

Now you can use tools like curl, Postman, or any API testing tool to test the authentication endpoints. Here's how you can test the endpoints using curl:

Register a new user:
curl -X POST http://localhost:3000/auth/register -H "Content-Type: application/json" -d '{"username": "testuser", "password": "testpassword"}'
Login with the registered user:
curl -X POST http://localhost:3000/auth/login -H "Content-Type: application/json" -d '{"username": "testuser", "password": "testpassword"}'
Use the obtained token to access the protected route:
curl http://localhost:3000/profile -H "Authorization: Bearer "

Conclusion

In this article, we’ve learned how to implement JWT authentication using Passport in a NestJS application with a Mongoose database. We covered setting up Mongoose, creating a user schema, configuring Passport and JWT strategy, and protecting routes using the AuthGuard. This approach provides a secure and efficient way to handle user authentication and authorization in your NestJS application.

Here’s a link to a sample project repository for a more concrete demonstration of the concepts discussed in this article: Github Repo

Establishing PostgreSQL Connection with Prisma in NestJS: A Comprehensive Guide with Bookmark API Example

Vishnu C Prasad — Thu, 17 Aug 2023 03:13:41 +0000

In modern web development, setting up a robust and efficient database connection is crucial for building scalable and maintainable applications. NestJS, a popular backend framework for Node.js, offers a comprehensive ecosystem for creating APIs and microservices. When combined with Prisma, an advanced database toolkit, and Docker, a platform for containerizing applications, you can achieve an optimized development environment for your database-driven applications. In this guide, we’ll walk through the process of establishing a PostgreSQL connection using Prisma in a NestJS setup, all within a Docker environment. To showcase the implementation, we’ll also create a Bookmark API as an example.

Introduction
Prerequisites
Setting Up NestJS Project
Configuring Docker for PostgreSQL
Installing and Configuring Prisma
Creating PostgreSQL Connection with Prisma
Building the Bookmark API with Prisma
Running the Application

1. Introduction

NestJS is a powerful and extensible framework that enables developers to build efficient, scalable, and modular server-side applications. Prisma, on the other hand, simplifies database access with a type-safe and query-building API. By integrating these technologies within a Docker environment, you can ensure consistent development and deployment across different platforms.

2. Prerequisites

Before we begin, make sure you have the following prerequisites installed on your system:

Node.js and npm: For running the NestJS application.
Docker: For containerizing the PostgreSQL database.
Nest CLI: For generating NestJS project files.
Visual Studio Code (or any preferred code editor): For writing and editing code.

3. Setting Up NestJS Project

Let’s start by creating a new NestJS project. Open your terminal and execute the following commands:

# Install the Nest CLI globally (if already installed ignore this command)
npm install -g @nestjs/cli

# Create a new NestJS project
nest new nest-prisma-bookmark-api

Navigate to the project directory:

cd nest-prisma-bookmark-api

4. Configuring Docker for PostgreSQL

To ensure a consistent database environment, we’ll use Docker to set up a PostgreSQL container. Create a docker-compose.yml file in the root of your project directory with the following content:

version: '3.8'
services:
  postgres:
    image: postgres:latest
    environment:
      POSTGRES_USER: nestjs
      POSTGRES_PASSWORD: nestjs_password
      POSTGRES_DB: bookmark_db
    ports:
      - '5432:5432'
    networks:
      - postgres_network
networks:
      - postgres_network

This configuration sets up a PostgreSQL container with a user, password, and database name.

5. Installing and Configuring Prisma

Prisma simplifies database interactions by generating a type-safe client from your data model. To install Prisma, run:

npm install @prisma/cli

Initialize Prisma by running:

npx prisma init

Follow the prompts and choose the PostgreSQL database you set up with Docker. This will generate a prisma folder containing your database configuration.

6. Creating PostgreSQL Connection with Prisma

Open the prisma/schema.prisma file and define your data model. For our Bookmark API example, let's create a Bookmark model:

model Bookmark {
  id        Int      @id @default(autoincrement())
  title     String
  url       String
  createdAt DateTime @default(now())
}

After defining the schema, apply the changes to the database by running:

npx prisma migrate dev

This will generate the necessary database tables.

7. Building the Bookmark API with Prisma

Create a new module for the Bookmark API:

nest generate module bookmark

Inside the generated bookmark module, create a bookmark.entity.ts file with the following content:

import { Prisma } from '.prisma/client';

export class Bookmark implements Prisma.BookmarkCreateInput {
  id?: number;
  title: string;
  url: string;
  createdAt?: Date;
}

Now, create a bookmark.service.ts file within the same module:

import { Injectable } from '@nestjs/common';
import { PrismaService } from 'src/prisma/prisma.service';
import { Bookmark } from './bookmark.entity';

@Injectable()
export class BookmarkService {
  constructor(private readonly prisma: PrismaService) {}

  async create(data: Bookmark): Promise<Bookmark> {
    return this.prisma.bookmark.create({
      data,
    });
  }

  async findAll(): Promise<Bookmark[]> {
    return this.prisma.bookmark.findMany();
  }
}

Finally, create a bookmark.controller.ts file within the module:

import { Controller, Get, Post, Body } from '@nestjs/common';
import { BookmarkService } from './bookmark.service';
import { Bookmark } from './bookmark.entity';

@Controller('bookmark')
export class BookmarkController {
  constructor(private readonly bookmarkService: BookmarkService) {}

  @Post()
  async create(@Body() bookmarkData: Bookmark): Promise<Bookmark> {
    return this.bookmarkService.create(bookmarkData);
  }

  @Get()
  async findAll(): Promise<Bookmark[]> {
    return this.bookmarkService.findAll();
  }
}

8. Running the Application

With the Bookmark API implemented, it’s time to run the application. Start the PostgreSQL container using Docker Compose:

docker compose up -d

Then, start the NestJS application:

npm run start:dev

Your NestJS application with Prisma integration and the Bookmark API is now up and running. You can access the API at http://localhost:3000/bookmark.

Conclusion

In this article, we’ve explored the process of establishing a PostgreSQL connection using Prisma within a NestJS application. By combining these technologies with Docker, you can achieve a consistent and efficient development environment. The Bookmark API example demonstrates the seamless integration of Prisma and NestJS, enabling you to build powerful and scalable database-driven applications.

Here’s a link to a sample project repository for a more concrete demonstration of the concepts discussed in this article: Github Repo

Establishing MongoDB Connection with Mongoose in NestJS: A Create User Example

Vishnu C Prasad — Wed, 16 Aug 2023 04:28:51 +0000

NestJS is a powerful Node.js framework that enables developers to build efficient, scalable, and maintainable server-side applications. When it comes to working with databases, MongoDB is a popular choice due to its flexibility and scalability. To interact with MongoDB in a NestJS application, one of the most commonly used libraries is Mongoose, which provides an elegant and straightforward way to define schemas, create models, and perform database operations. In this article, we will explore how to establish a MongoDB connection with Mongoose in a NestJS application and create a user using a practical example.

Prerequisites

Before we dive into the code, make sure you have the following prerequisites installed:

Node.js and npm: Ensure you have Node.js (along with npm, its package manager) installed on your machine.
NestJS CLI: Install the NestJS CLI globally using the following command:

npm install -g @nestjs/cli

MongoDB: Make sure you have a MongoDB instance running locally or have access to a remote MongoDB server.

Setting up the NestJS Application

Let’s start by creating a new NestJS application. Open your terminal and run the following commands:

nest new nest-mongoose-example
cd nest-mongoose-example

This will generate a new NestJS project with the name nest-mongoose-example.

Installing Dependencies

In your project directory, install the necessary dependencies using the following commands:

npm install mongoose @nestjs/mongoose

mongoose: The MongoDB library for Node.js.
@nestjs/mongoose: The official NestJS package for integrating Mongoose.

Establishing the MongoDB Connection

In order to connect to MongoDB using Mongoose in a NestJS application, you need to set up a module to manage the connection. Let’s create a database.module.ts file inside the src folder with the following content:

// database.module.ts
import { Module } from '@nestjs/common';
import { MongooseModule } from '@nestjs/mongoose';

@Module({
  imports: [
    MongooseModule.forRoot('mongodb://localhost/nest-mongoose-example'),
  ],
})
export class DatabaseModule {}

In this module, we use the MongooseModule.forRoot() method to establish the connection to the MongoDB instance. Adjust the connection URL (mongodb://localhost/nest-mongoose-example) according to your MongoDB configuration.

Creating a User Schema and Model

Next, let’s create a user schema and model using Mongoose. Create a new file named user.schema.ts inside the src folder with the following code:

// user.schema.ts
import * as mongoose from 'mongoose';

export const UserSchema = new mongoose.Schema({
  firstName: String,
  lastName: String,
  email: String,
});

export interface User extends mongoose.Document {
  firstName: string;
  lastName: string;
  email: string;
}

This schema defines the structure of a user document in MongoDB.

Creating a User Service

Now that we have the schema and model in place, let’s create a service to interact with the database. Create a user.service.ts file inside the src folder with the following content:

// user.service.ts
import { Injectable } from '@nestjs/common';
import { InjectModel } from '@nestjs/mongoose';
import { Model } from 'mongoose';
import { User } from './user.schema';

@Injectable()
export class UserService {
  constructor(@InjectModel('User') private readonly userModel: Model<User>) {}

  async createUser(firstName: string, lastName: string, email: string): Promise<User> {
    const newUser = new this.userModel({ firstName, lastName, email });
    return newUser.save();
  }
}

The UserService class uses the InjectModel decorator from @nestjs/mongoose to inject the User model into the service. The createUser method takes user information as input and creates a new user in the database.

Creating a User Controller

To expose the user creation functionality as an API endpoint, let’s create a controller. Create a user.controller.ts file inside the src folder with the following code:

// user.controller.ts
import { Controller, Post, Body } from '@nestjs/common';
import { UserService } from './user.service';

@Controller('users')
export class UserController {
  constructor(private readonly userService: UserService) {}

  @Post()
  async createUser(@Body() body: any) {
    const { firstName, lastName, email } = body;
    return this.userService.createUser(firstName, lastName, email);
  }
}

In this controller, we define a POST endpoint at the /users route. When a POST request is made to this route with user data in the request body, the createUser method from the UserService is called to create a new user.

Wiring Everything Together

Finally, let’s wire up the modules and components in the app.module.ts file:

// app.module.ts
import { Module } from '@nestjs/common';
import { MongooseModule } from '@nestjs/mongoose';
import { DatabaseModule } from './database.module';
import { UserController } from './user.controller';
import { UserService } from './user.service';
import { UserSchema } from './user.schema';

@Module({
  imports: [DatabaseModule, MongooseModule.forFeature([{ name: 'User', schema: UserSchema }])],
  controllers: [UserController],
  providers: [UserService],
})
export class AppModule {}

In this file, we import the necessary modules, controllers, services, and schemas. We use the MongooseModule.forFeature() method to import the User model into the module.

Testing the User Creation

To test the user creation functionality, start your NestJS application using the following command:

npm run start:dev

Assuming your server is running locally on port 3000, you can use a tool like curl, Postman, or your preferred API client to make a POST request to http://localhost:3000/users with the following JSON body:

{
  "firstName": "John",
  "lastName": "Doe",
  "email": "john.doe@example.com"
}

You should receive a response containing the newly created user document.

Conclusion

In this article, we walked through the process of establishing a MongoDB connection using Mongoose in a NestJS application. We created a user schema, model, service, and controller to perform a user creation operation using a REST API endpoint. NestJS, Mongoose, and MongoDB provide a powerful stack for building efficient and scalable server-side applications, making it a popular choice for developers.