DEV Community: Patrick Lusaya

How to migrate to modular Firebase SDK: A quick guide

Patrick Lusaya — Sat, 27 Jul 2024 09:39:42 +0000

Imagine you’re packing for a trip. Instead of throwing everything from your closet into your suitcase, you only pack what you need for the journey. Not only does this make your suitcase lighter, but it also means you’re more organized and can find things easily.

Well, Firebase has done something similar with their new update! They’ve introduced a new way to use their tools that’s all about packing only what you need. This new method is called "modular Firebase," and it’s all about making your app faster and easier to manage.

In the past, using Firebase was a bit like taking everything from your closet – it worked, but it wasn’t always the most efficient. Now, with Firebase version 9 and later, you can pick and choose exactly what parts of Firebase you need, making your app lighter and quicker.

Hey, follow me on twitter, I'll help you with something ... I promise

In this article, i’ll show you how to switch from the old way of using Firebase to the new modular way

1.Initialize Firebase

Just like you wouldn’t pack your whole closet, you only import the Firebase parts you need.Create a file called firebaseConfiguration, paste the following code imports the required Firebase modules, configure Firebase with your project's settings, initialize Firebase and its services, and check if Firebase is already initialized in your app.

import { initializeApp, getApp, getApps } from 'firebase/app';
import { initializeAuth, getReactNativePersistence } from 'firebase/auth/react-native';
import { getFirestore } from 'firebase/firestore';
import { getStorage } from 'firebase/storage';
import AsyncStorage from '@react-native-async-storage/async-storage';

const firebaseConfig = {
    apiKey: "yourApiKey",
    authDomain: "yourAuthDomain",
    projectId: "yourProjectID",
    storageBucket: "yourStorageBucket",
    messagingSenderId: "yourMessagingSenderID",
    appId: "yourAppID",
    measurementId: "yourMeasurementID"
};

const app = initializeApp(firebaseConfig);
const auth = initializeAuth(app, {
    persistence: getReactNativePersistence(AsyncStorage)
});
const db = getFirestore(app);
const storage = getStorage(app);

const isFirebaseInitialized = () => {
    const apps = getApps();
    if (apps.length === 0) {
        return false;
    }
    const app = getApp();
    const config = app.options;
    return !!config.projectId;
};

export { auth, db, storage,isFirebaseInitialized };

We have exported auth, db , storage and isFirebaseInitialized so we can use them wherever we need in our app.

2.Use the Exported Modules

In our app's entry point, we'll start by checking if Firebase is properly initialized using our isFirebaseInitialized function. If Firebase is not initialized correctly, we’ll log a message indicating the issue. Otherwise, we’ll proceed with rendering our main app component.

import { View, Text } from 'react-native';
import React from 'react';
import { isFirebaseInitialized } from './firebaseConfiguration';

const App = () => {
  if (!isFirebaseInitialized()) {
    console.log('Firebase is not initialized with a valid projectId.');
    return null;
  }

  return (
    <View>
      <Text>App</Text>

    </View>
  );
};

export default App;

3.Modular firebase in action.

Now, let's see modular Firebase in action by fetching, creating, updating, and deleting data.

Before modular Firebase, you might have imported everything from Firebase like this:

import * as firebase from 'firebase';

While this worked perfectly, it wasn't the best approach because it loaded the entire Firebase library, including parts you might not need. This made your app's bundle size larger and could slow down its performance.

Let's compare two fetch operations, one using the Previous Firebase SDK and the other using the new modular firebase SDK

Previous Firebase SDK
In the previous Firebase SDK, you would import everything from Firebase, which could lead to larger bundle sizes and slower performance.

import firebase from "firebase";

const fetchData = async () => {
  const querySnapshot = await 
  firebase.firestore().collection('yourCollectionName').get();
  querySnapshot.forEach((doc) => {
    console.log(`${doc.id} => ${doc.data()}`);
  });
};

fetchData();

Modular firebase sdk
With modular Firebase, we only import the specific modules we need at any given moment. This is more efficient and helps keep our app lightweight and fast.

import { collection, getDocs } from 'firebase/firestore';
import { db } from './firebaseConfiguration';

const fetchData = async () => {
  const querySnapshot = await getDocs(collection(db, 'yourCollectionName'));
  querySnapshot.forEach((doc) => {
    console.log(`${doc.id} => ${doc.data()}`);
  });
};

fetchData();

Instead of loading the entire Firebase library, we have just imported the modules that we needed, collection and getDocs.

By importing only the necessary modules, we keep our code clean and efficient. This modular approach makes our app faster and easier to manage, especially as it grows in complexity. Now, let’s take a look at the complete CRUD operations using both the previous Firebase SDK and the new modular Firebase SDK.

Create Data
Previous SDK

import firebase from "firebase";
const createData = async () => {
  try {
    const docRef = await 
      firabase.firestore().collection('yourCollectionName').add({
      field1: 'value1',
      field2: 'value2'
    });
    console.log('Document written with ID: ', docRef.id);
  } catch (e) {
    console.error('Error adding document: ', e);
  }
};

createData();

Modular firebase

import { collection, addDoc } from 'firebase/firestore';
import { db } from './firebaseConfiguration';

const createData = async () => {
  try {
    const docRef = await addDoc(collection(db, 'yourCollectionName'), {
      field1: 'value1',
      field2: 'value2'
    });
    console.log('Document written with ID: ', docRef.id);
  } catch (e) {
    console.error('Error adding document: ', e);
  }
};

createData();

Update Data
Previous Firebase SDK

import firebase from "firebase";

const updateData = async (id) => {
  const docRef = 
  firabase.firestore().collection('yourCollectionName').doc(id);
  try {
    await docRef.update({
      field1: 'newValue1'
    });
    console.log('Document updated');
  } catch (e) {
    console.error('Error updating document: ', e);
  }
};

updateData('yourDocumentId');

Modular Firebase SDK

import { doc, updateDoc } from 'firebase/firestore';

const updateData = async (id) => {
  const docRef = doc(db, 'yourCollectionName', id);
  try {
    await updateDoc(docRef, {
      field1: 'newValue1'
    });
    console.log('Document updated');
  } catch (e) {
    console.error('Error updating document: ', e);
  }
};

updateData('yourDocumentId');

Delete Data
Previous Firebase SDK

import firebase from "firebase";
const deleteData = async (id) => {
  const docRef = 
  firabase.firestore().collection('yourCollectionName').doc(id);
  try {
    await docRef.delete();
    console.log('Document deleted');
  } catch (e) {
    console.error('Error deleting document: ', e);
  }
};

deleteData('yourDocumentId');

Modular Firebase SDK

import { doc, deleteDoc } from 'firebase/firestore';

const deleteData = async (id) => {
  const docRef = doc(db, 'yourCollectionName', id);
  try {
    await deleteDoc(docRef);
    console.log('Document deleted');
  } catch (e) {
    console.error('Error deleting document: ', e);
  }
};

deleteData('yourDocumentId');

Overall Arrangement and Syntax

collection(db, 'yourCollectionName'): Used to refer to a collection in Firestore.
doc(db, 'yourCollectionName', 'yourDocumentId'): Used to refer to a specific document within a collection.
Functions like getDocs, addDoc, updateDoc, and deleteDoc: These perform the actual operations on the data.

Pros of Modular Firebase

Smaller Bundle Size:

With modular imports, you only include the parts of Firebase you actually use, rather than the entire library.This reduces your app’s bundle size, leading to faster load times and better performance.

Improved Performance:

By importing only what you need, you minimize the amount of code that the JavaScript engine has to process. This can result in faster execution and reduced memory usage.

Tree-Shaking Support:

The modular approach supports tree-shaking, which is a technique to eliminate unused code during the build process.This further optimizes your app’s performance and reduces the final bundle size.

Cons of Modular Firebase

More Verbose Imports:

You need to import each function or module individually.This can make the import statements longer and potentially more cumbersome, though it provides clearer insights into what’s used.

Migration Effort:

Transitioning from the previous SDK to the modular SDK involves updating existing code and ensuring compatibility. This migration process can be time-consuming, especially for large projects with extensive use of Firebase.

That's pretty much it , adios !

Follow me on twitter, for more contents like these

How to setup Redux in React Js

Patrick Lusaya — Fri, 19 Jul 2024 17:04:30 +0000

Hello devs! This is a quick and to-the-point tutorial on how to set up Redux in React.

Given that you've landed on this article, you probably already know the significance of Redux in state management and why it's a vital tool for managing state in your applications.

Follow me on twitter, I'll help you out with something ... I promise.

ALSO

You could check this tutorial on youtube

There's so many ways to do this and here's the way we are gonna go.

On your project's root directory, Run the following command to install the necessary dependencies, npm install react-redux reduxjs/toolkit
Open your project's index.js file and wrap the <App/> with Provider from react-redux

Code:

 const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
      <Provider>
          <App />
      </Provider>
);

reportWebVitals();

<Provider>: Wraps the application in the Redux Provider component, making the Redux store available to all components within the app.

<App />: The main application component that contains the rest of the React components.

Create a redux store on the Provider you've just added

const store = configureStore({
  reducer: Reducer,
});

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
      <Provider store={store}>
          <App />
      </Provider>
);

Code Explanation:

const store = configureStore({
  reducer: Reducer,
});

Here, we are creating a Redux store using the configureStore function from the @reduxjs/toolkit package. The configureStore function simplifies the setup process and comes with sensible defaults. We pass an object with a reducer property to configureStore, specifying the root reducer (Reducer) which handles state updates.

We have declared the root reducer named Reducer but , we have not created one. Do so by creating a store.js file from root directory.

Sample code in the index.js:

import { combineReducers } from 'redux';

//-> reducers imports
import AppReducer from "./AppReducer"
import PostReducer from "./PostReducer"

export default combineReducers({

    app: AppReducer,
    posts:PostReducer


});

Explanaation:

combineReducers: This function from Redux is used to combine multiple reducers into a single root reducer. Each reducer manages its slice of the application state.

AppReducer and PostsReducer: These are example reducers imported from their respective files. Each reducer handles state updates for different parts of the application.

appand posts: These keys represent different slices of the state managed by AppReducer and PostsReducer respectively.

From here, all state updates managed by AppReducer can be accessed in your components using the app key, while updates managed by PostsReducer can be accessed using the posts key

Complete index.js code:

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

//redux import
import { configureStore } from '@reduxjs/toolkit';
import { Provider } from 'react-redux';

//reducer import
import Reducer from './reducers';

//router import
import {BrowserRouter} from "react-router-dom";

const store = configureStore({
  reducer: Reducer,
});


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(

  // Remove BrowserRouter tags if you dont want to use Routing
    <BrowserRouter>
      <Provider store={store}>
          <App />
      </Provider>
    </BrowserRouter>
);

reportWebVitals();

Complete store.js code:

import { combineReducers } from 'redux';

//-> reducers imports
import AppReducer from "./AppReducer"
import PostsReducer from "./PostsReducer"

export default combineReducers({

    app: AppReducer,
    posts:PostsReducer


});

Sample Structure of PostReducer.js:

import {FETCH_POSTS_SUCCESS,} from "../actions/Types";

const INITIAL_STATE = {
    fetchedPosts:[]
};

const PostReducer = (state = INITIAL_STATE, action) => {

    switch (action.type) {

        case FETCH_POSTS_SUCCESS:

        return {...state, fetchedPosts: action.payload,};


        default:
            return state;
    }
};

export default PostReducer;

And just like that you're done setting up redux.

You could check this tutorial on youtube

If, I've just saved your day follow me on twitter and I'll save you another

Adios !

How to intergrate BEEM Sms API with React

Patrick Lusaya — Wed, 17 Jul 2024 14:41:58 +0000

Hello Devs,

After facing some challenges while integrating the BEEM SMS API with React.js, I finally succeeded and thought, why not share my experience to help others who might be attempting the same task?

In this article, I'll guide you through the process step-by-step to make your integration smooth and straightforward.

BEEM SMS API is a REST based API that supports sending sms as well as receiving delivery status reports. It currently only operates across Africa.

Getting Hands Dirty.

Visit the BEEM website, sign up, and if everything goes well, you will be redirected to the dashboard.
Once you have signed up, you automatically receive 10 SMS credits. If you need more (which you probably will), simply click on "Purchase SMS" in the sidebar.
Enter the desired quantity of messages in the "Purchase Quantity" field, then click the "Next" button. Select your preferred payment method, complete the payment process, and once the transaction is confirmed, you'll receive an email from BEEM. Your SMS credits will then be updated and displayed on the dashboard.
Generate your API key by clicking on "API Setup" in the sidebar. If you don't have an autogenerated key, click the "Create" button to generate one.
Scroll down the sidebar and click on "API Docs" to understand how things operate. In the documentation, scroll further down to "Sample Scripts" to find a POST script for sending SMS
Now that we are all setup, create a react project by running the command npx create-react-app my-app. Open App.js and on your component's return() paste this:

return (
   <div className="App">
     <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />

        <button style={{width: 100, height: 50}} onClick= 
           {sendMessage}>Send Message</button>
      </header>
    </div>

   </div>
  );

When the button is clicked, it will trigger the sendMessage method. Paste the following code to implement the sendMessage method

const sendMessage = async () => {
    const API_KEYY = "your api key";
    const SECRET_KEY = "your secret key";
    const CONTENT_TYPE = "application/json";
    const SOURCE_ADDR ="INFO"; //This is a default SENDER ID you are 
    assigned to on signup , you can later change it
    const url = 'https://api.beem.africa/v1/send';

    fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": CONTENT_TYPE,
        Authorization: "Basic " + btoa(API_KEYY + ":" + SECRET_KEY),
      },
      body: JSON.stringify({
        source_addr: SOURCE_ADDR,
        schedule_time: "",
        encoding: 0,
        message: "Hello World",
        recipients: [
          {
            recipient_id: 1,
            dest_addr: "25465943782",
          },

        ],
      }),
    })
      .then((response) => response.json())
      .then((data) => console.log(data))
      .catch((error) => console.error(error));
  }

*What the code does *

This code defines a function sendMessage that sends an SMS message using the BEEM SMS API. It sets up the necessary parameters such as API_KEYY, SECRET_KEY, CONTENT_TYPE, and SOURCE_ADDR (which is a default sender ID assigned to you on signup but can be changed later).

Once the request is sent, it handles the response by converting it to JSON and logging the data to the console. Any errors that occur during the request are caught and logged to the console as well

On clicking Send Message, Voila your message is sent. The SMS will be sent from a default name(INFO), that you can change by simply going on the dashboard's sidebar and click "Sender Names" under the "Campaign" link. Apply for a sender name, after the application is approved you can now use that as your sender name/SOURCE_ADDR/SENDER ID

Note:If you are using the sender ID "INFO", please note that you can only send messages successfully to some limited mobile networks. The message will be sent, but it may not be delivered to the recipient. To ensure successful delivery, consider applying for a sender ID/sender name

That's it, adios !

How To Setup Laravel on Windows with XAMPP: Quick Guide

Patrick Lusaya — Wed, 24 Jan 2024 12:25:23 +0000

Welcome back to Laravel! Whether you're a beginner or a seasoned developer who's forgotten the basic setup, this quick guide will help you set up Laravel on Windows using XAMPP.

Follow me on twitter, I'll help you out with something ... I promise.

Lets get started

Step 1: Install PHP

First, you'll need PHP installed on your system. Laravel, being a PHP framework, requires PHP to function. You can download PHP from the official PHP website.

Click on the Windows Download

On the page where you are redirected, choose the thread-safe option and click on the zip link to download it.

Once the zip file has been downloaded, extract it and copy the extracted folder into your program files folder located at

Local disk(C) -> Program files

Now after pasting the folder, copy the its address.

On the start menu search for "Edit the system environment variables". Press enter to open it. A new window will appear then click on the "Environment Variables: button.

Another new window will appear and on the System Variables section, double-click on the Path to open up a new screen.

On that new screen, click on the new button. A field will appear. Paste the address copied previously and press OK on all screens to save your changes.

To check if PHP is installed successfully, go to the start menu and open your terminal by typing cmd.
On the terminal type, php -v and press Enter to see the version of PHP installed.

Step 2: Install Composer
Composer is a dependency management tool for PHP which is required to install any PHP package/library you might want to use. Here's how to install it.

Visit https://getcomposer.org/ and click on the DOWNLOAD button.

You will be redirected to the download page where you will have to click on the Composer-Setup.exe to download Composer on your machine.

After the download is complete, Open the setup and select "install for all users"

For the next pop-up screens that appear click YES to allow installation then choose the installation type and press NEXT.
Select the command-line PHP path you want to use, check the box to add the PHP path, and click NEXT.
If you want to use a proxy, check the box and enter the proxy URL and if not proceed by clicking NEXT.
If everything seems okay, click the INSTALL button.
Read the information that follows after installation and click NEXT.
Finally, click the FINISH button to complete the installation.

Open your terminal and type "composer" to check if the installation was successful. If it was you will see the composer version and other composer commands

Step 3: Install XAMPP

Visit here and click on the Xampp for Windows link to start the download.

Select MySQL, FileZilla ftp server, PHP, phpMyAdmin or you can just leave the default options and click the Next button.
In order to configure the htdocs folder for our apps, select the root directory path. Consider "C:\xampp."
To enable the XAMPP modules from the Windows firewall, click the Allow access button.
Click the XAMPP Setup wizard's Finish button after the installation is complete.
To start Xampp, go over to the start menu and type "xampp" then press enter to open it.

To start the server, press the start button for Apache and Mysql, then the admin button of Mysql to open phpMyAdmin.

Now that you have PHP, Composer, and XAMPP installed, you can create a new Laravel project.

Since you are using xampp, the laravel project you are going to create should be within the xampp's htdocs folder found at

C:\xampp\htdocs

Open the terminal at that location (

C:\xampp\htdocs

) and run the command composer global require "laravel/installer" to install laravel

Then run laravel new my_app on the same path (C:\xampp\htdocs) to create a project called "my_app"
Configure .env File for XAMPP

Edit the .env file in your Laravel project and set up your database connection:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_database_name
DB_USERNAME=root
DB_PASSWORD=

Replace your_database_name with the actual database name.

The default XAMPP MySQL username is root, and the password is usually empty.

Now open your browser and paste in http://localhost/my-app/public

If everything went well you will be redirected to the welcome view

That's it! You've now successfully set up Laravel on Windows using XAMPP.

If, I've just saved your day follow me on twitter and I'll save you another

Happy coding!

How to Implement Role-Based Authentication in Laravel with Sanctum: A Step-by-Step Guide

Patrick Lusaya — Thu, 13 Apr 2023 06:35:15 +0000

Role-based authentication is a crucial aspect of web application development, especially when it comes to managing user access to different parts of the system. In Laravel, Sanctum is a popular package for implementing API authentication, including role-based access control. This guide will provide a step-by-step approach to implement role-based authentication in Laravel using Sanctum.

Our API will have users with two types of roles: admin and moderator. Admin will create moderators and Moderators will basically perform all other operations that may be needed.

Follow me on twitter, I'll help you out with something ... I promise.

Lets get started !

Step 1: Setting up our project.

Create a laravel project by running the command composer create-project laravel/laravel myProjectName anywhere you want to create your project.
After that create your database in any type of database management system of your choice then head over to .env file of your project and configure the following
:

DB_CONNECTION=pgsql //fill according to your database
DB_HOST=127.0.0.1
DB_PORT=5432 //fill according to your database
DB_DATABASE=databaseName
DB_USERNAME=yourUsername
DB_PASSWORD=yourPassword

Now, install sanctum to your project by running the command composer require laravel/sanctum on your project's root directory.
Next, you should publish the Sanctum configuration and migration files using the command php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
After that, you should replace Sanctum's middleware of your api middleware group within your application's app/Http/Kernel.php file with:

'api' => [
    \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
    \Illuminate\Routing\Middleware\ThrottleRequests::class.':api',
    \Illuminate\Routing\Middleware\SubstituteBindings::class,
],

Finally, run php artisan migrate

Step 2: Create users table and User Model

In your migrations folder open the migration file create_users_table and on the up function replace the existing code with:

Schema::create('users', function (Blueprint $table) {
            $table->id();
            $table->string('username')->unique();
            $table->string('email')->unique();
            $table->timestamp('email_verified_at')->nullable();
            $table->string('password');
            $table->rememberToken();
            $table->enum('role', [ 'admin', 'moderator'])->default('admin');
            $table->timestamps();
        });

What this does is it creates a users table with the columns username, email, password, role and others as described in the function.
$table->enum('role', [ 'admin', 'moderator'])->default('admin'); - This adds a "role" column to the "users" table with an enumerated data type and a default value of "admin". The "role" column can only contain values of "admin" or "moderator". Now, what we are doing here is that if the the registration request won't have a role in it then by default that user will have a role of admin.

Run php artisan migrate to create the users table.

Then,create a User model with fillable fields: In Laravel, you can create a User model by running the php artisan make:model User command in the terminal. Once you've done that, you can define the model's fillable fields by adding the following code to the model file:

protected $fillable = [
    'username',
    'email',
    'password',
    'role'
];

Step 3: Create a middleware to check roles of users.

A middleware simply sits between the server and your request, it checks to see if you're allowed to access that information or perform that action.

We will create a checkRole middleware by running the command php artisan make:middleware checkRole.
Once that is done open the middleware and paste the following code :

public function handle(Request $request, Closure $next, ...$roles)
    {

        $user = $request->user();

        if (! $user || ! in_array($user->role, $roles)) {
            abort(403, 'Unauthorized');
        }

        return $next($request);

    }

What this does is it checks if the authenticated user has a role that is allowed to access a certain route. If the user does not have the required role, it aborts the request and returns a 403 (Forbidden) error message. Otherwise, it passes the request to the next middleware in the chain.
Now register the middleware you just created by adding it in the array of routeMiddleware in your kernel.php as 'restrictRole' => \App\Http\Middleware\CheckRole::class,

Step 4: Create Authentication Controller

This controller will handle our registration and login logic.

But remember, since only admin can create moderators, Then the registration endpoint must be protected because we don't want other users to assign roles to themselves. Therefore we will create an initial default admin who can then create other admins and moderators.
To do this we need to create a seeder called defaultAdmin by running the command php artisan make:seeder defaultAdmin. Once that is done open the file and paste the following code to create a default initial user:

public function run()
    {
        User::create(
            [
            'username' => 'admin',
            'email' => 'admin@jf.com',
            'password' => bcrypt('password'),
            'role' => 'admin',
            ]
            );
    }

Now you can proceed creating the Authentication controller by running php artisan make:controller AuthController
Open the file and paste the following code to handle registration and login
:

public function register( Request $request){
        $data = $request->validate([
            'username' => 'required|unique:users',
            'email' => 'required|unique:users',
            'password' => 'required|confirmed',
            'role' => 'in:admin,moderator',
        ]);

        // Set default role to 'admin' if not provided in the request
        $userData = array_merge($data, ['role' => $data['role'] ?? 'admin']);


        // Mass assign the validated request data to a new instance of the User model
        $user = User::create($userData);
        $token = $user->createToken('my-token')->plainTextToken;

        return response()->json([
            'token' =>$token,
            'Type' => 'Bearer'
        ]);
    }

    public function login(Request $request)
    {
        $fields = $request->validate([
            'username' => 'required',
            'password' => 'required',
        ]);

        $user = User::where('username', $fields['username'])->first();

        if (!$user || !Hash::check($fields['password'], $user->password)) {
            return response([
                'message' => 'Wrong credentials'
            ]);
        }

        $token = $user->createToken('my-token')->plainTextToken;

        return response()->json([
            'token' => $token,
            'Type' => 'Bearer',
            'role' => $user->role // include user role in response
        ]);
    }

Code Explanation

The register function first uses the validate method of the request object to validate the input data against some rules defined in an array.
If the validation passes, the function continues by merging the validated data with a default value for the role field, if not provided in the request.
The function then creates a new instance of the User model with the validated and merged data, using the create method, which performs a mass assignment of the input data to the new user object.
After creating the user, the function generates an access token for the user using the createToken method of the user object, and returns a JSON response containing the token and its type. The token can be used by the client to authenticate subsequent requests to protected routes on the server
.
The login function first validates the input data (the username and password fields) using the validate method of the request object. The function then retrieves a user instance from the database based on the provided username. If the user doesn't exist or the password is incorrect, it returns a response with the message "Wrong credentials".
If the user exists and the password is correct, the function generates an access token for the user using thecreateToken method of the user object and returns a JSON response containing the token, its type, and the user's role. The token can be used by the client to authenticate subsequent requests to protected routes on the server.

Step 5: Create routes

Open api/routes.api file and paste the following code

//public route
Route::post('/auth/login', [AuthController::class, 'login']);
//protected route
Route::group(['middleware' => ['auth:sanctum']], function(){
 Route::post('/auth/register', [AuthController::class, 'register'])->middleware('restrictRole:admin');
Route::get('/users', [PostController::class, 'show'])->middleware('restrictRole:admin');
Route::put('/users/{id}', [PostController::class, 'update'])->middleware('restrictRole:moderator');
});

You may notice we have added two more routes, a GETrequest to users and a PUT request to users. We want only admin to have access to the endpoint that gets users and only moderators to have access to the endpoint that updates users.
Now, as you have seen in the above code all these routes have been placed within a single function and under one group. A route group allows you to group several routes together and apply the same middleware, namespace, prefix, or other common attributes to them.
In the provided code, Route::group is a function that creates a new route group with middleware. The middleware in this case is auth:sanctum, which indicates that any route within this group requires authentication using the Sanctum middleware.
In the protected routes we have used the ->middleware() method which assigns middleware to a specific route in Laravel. In the provided code,we have assigned to the route our custom restrictRole middleware which we created and registered to the routeMiddleware array of the kernel.php file.
It checks if the authenticated user has any of the specified roles. If the user has one of the specified roles, the request continues to the route's controller or closure. If the user does not have any of the specified roles, the middleware will return a response indicating that the user is not authorized to access the route.
Since all this is clear now lets head over to our AuthController and add functions show and update which have been used by the last two routes.
In your AuthController add this code:

// You could basically write some functional code here to 
// perform these operations
public function show(){
return " All users are shown here";
}

public function update(Request $request , $id){
return " All updates on users are done here";
}

From here an admin could see all users and moderators could update them by their id. Since we already have one default admin, you can now login and register other users(admin/moderators) and try to access the restricted endpoints.

Here is a sample registration and login requests.

{
"username":"James",
"email": "jamie@gmail.com",
"password": "123456",
"password_confirmation": "123456",
"role" : "moderator",
}

{
"username": "James",
"password": "123456"
}

Here you will create a moderator and after login the user can access the routes which he has authority to.

That's all for today. Hope you got something from this one . Enjoy !!

How to use Lordicon: The Best Animated Icon Library

Patrick Lusaya — Thu, 06 Apr 2023 12:02:51 +0000

As a developer, I understand the importance of icons in creating visually appealing and user-friendly websites and applications. However, with the multitude of icon libraries available, choosing the right one for my coding projects has always been a challenge. Every library comes with its unique features, styles, and customizations, and selecting the wrong one can result in a poor user experience or a project that doesn't meet the desired outcome.

If you've ever faced this dilemma, then you know how time-consuming and frustrating the process of choosing an icon library can be. But fear not! In this article, I'll share my experience using Lordicon, a versatile and widely used icon library, to help you make an informed decision for your next coding project.

Lordicon is a library of well-crafted animated icons that are ready for use in various digital products, presentations, or videos. With thousands of free and premium icons available in six different styles, Lordicon offers a wide range of options to suit various design needs.

What i like most about this library is that it has a lot of customization options that allows you to adjust colors, stroke width, animation speed and many other to match your project's specific design requirements.

Icons are of six styles. Wired lineal, wired flat, wired outline, wired gradient, system outline and system solid. The Wired styles offer a more modern, sleek appearance, while the System styles have a more traditional, familiar look that may suit some projects better.

Its pretty simple to get an animated icon here, simply click on the Icons link, then select the type of style you want to use. At the top left you can select either premium or free icons.

Once you have selected an icon, you can modify it according to the many options available. With Lordicon's customization options, you can select the size you want, the type of animation motion, and the colors, scale, stroke width, and media type that fit your specific design needs. This level of customization allows you to create icons that truly match the aesthetic and functional requirements of your project.

Customization is a key feature of the library, and it extends to the animation of the icons as well. When you select an animation format, you can further customize it by choosing to set a background color or leave it transparent, adjusting the size of the animation, and selecting the delay between animation loops.

This level of control over the animation ensures that you can create the perfect animated icon for your project, and that it fits seamlessly into your website or app's design. Moreover, the customization process is simple and easy to use, even for those who are not animation experts.

By clicking the download button you will have your well crafted animated icon.

In conclusion, Lordicon provides a versatile tool for designers, developers, and content creators alike. Whether you are looking to spruce up your website, create engaging presentations, or add a professional touch to your videos, Lordicon is a fantastic choice. So why not give Lordicon a try and see how it can take your design to the next level?

Thank you for reading, and I hope you found this article helpful in understanding the many features and benefits of Lordicon. Have a great day!

Create a Laravel CRUD Restful API and Secure it with Sanctum

Patrick Lusaya — Sun, 02 Apr 2023 11:17:47 +0000

Introducton
Laravel is a popular PHP framework that allows developers to build web applications quickly and efficiently. One of the most common use cases for Laravel is to create a RESTful API that can be used to communicate with other applications or services. In this tutorial, we'll show you how to build a Laravel CRUD RESTful API and secure it with Sanctum.

Sanctum is a Laravel package that provides a simple way to authenticate API requests using tokens. It works by creating a token for each authenticated user, which can then be used to make subsequent requests to the API. This makes it easy to secure your API and ensure that only authorized users have access to sensitive data. In this tutorial, we'll use Sanctum to secure our Laravel API and protect it from unauthorized access.

Prerequisites
Before we start, make sure you have the following:

Laravel installed on your machine
A basic understanding of Laravel
A code editor of your choice

Step 1: Set Up Laravel
First, we'll create a new Laravel project. Open your terminal or command prompt and enter the following command: composer create-project laravel/laravel my-api

Step 2: Set Up Database
Next, we need to set up our database. In this tutorial i will be using PostgreSql but you can use any database that you are comfortable with. Head over to your database console and create a database by writing the command CREATE DATABASE laravelapi. Open the .env file in the root of your project and update the following lines with your database credentials:

DB_CONNECTION=pgsql //fill according to your database
DB_HOST=127.0.0.1
DB_PORT=5432 // //fill according to your database
DB_DATABASE=laravelapi
DB_USERNAME=yourusername
DB_PASSWORD=yourpassword

Step 4: Create the Model and Migration
In Laravel, a model is a class that represents a database table. It provides an easy way to interact with the database by providing methods for querying and manipulating the table data.

A migration, on the other hand, is a PHP file that defines the changes to be made to the database schema. It provides a simple way to create, update or delete database tables, columns, indexes, and other database-related entities.

So, we will create a Product Model and its migration. The migration file contains the necessary code to create the Product table with the id, name, description, slug ,priceand timestamps columns.

To do this, write the following command on your project root directory: php artisan make:model Product --migration. Now head over to the database/migration folder and open up the file create_products_table. Now inside this file you will notice the up and down functions.

When we run a migration using the php artisan migrate command, Laravel will execute the up function to apply the changes defined in the migration. If we need to undo those changes later, we can run the php artisan migrate:rollback command, which will execute the down function to undo the changes made by the migration.

Inside, the up function add the code:

Schema::create('products', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('description')->nullable();
            $table->string('slug');
            $table->decimal('price', 5,2);
            $table->timestamps();
        });

Here's a breakdown of what each line does:

Schema::create('products', function (Blueprint $table) starts the process of creating a new database table called products. The function (Blueprint $table) is a callback that defines the columns and their data types.
$table->id(); creates an auto-incrementing id column, which serves as the primary key for the products table.
$table->string('name'); creates a name column of type string.
$table->string('description')->nullable(); creates a description column of type string that can be nullable (i.e. it can have a null value).
$table->string('slug'); creates a slug column of type string.
$table->decimal('price', 5,2); creates a price column of type decimal with 5 total digits and 2 decimal places.
$table->timestamps(); creates two columns, created_at and updated_at, which are used to track the creation and modification timestamps of each row in the products table.

Overall, this code creates a products table with five columns: id, name, description, slug, and price, along with the two timestamp columns.

On Your Product Model class add this code:

protected $fillable = [
    'name',
    'slug',
     'price',
     'description'
    ];

In Laravel, the $fillable property is used to specify which attributes of a model are allowed to be mass-assigned. Mass assignment is a convenient way to create or update multiple model instances at once using an array of data.

By setting these attributes in the $fillable array, we're telling Laravel that it's safe to mass-assign these attributes using an array of data. This is an important security measure that prevents malicious users from assigning arbitrary attributes to our model, which could potentially compromise our application.

Step 5: Create the Controller
Next, let's create a controller to handle our API requests. The primary responsibility of a controller is to receive requests from the client and perform the necessary actions to generate a response. This includes retrieving data from the database, processing data, and rendering views. Run the following command to create a controller : php artisan make:controller ProductController

Step 6: Add API Methods to the Controller
Now, let's add the methods to the controller that will handle the CRUD operations for our API. Open the ProductController.php file and add the following code:

* @return \Illuminate\Http\Response
     */
    public function index()
    {
        return Product::all();
    }

This index function uses the predefined method all() onto the Product Model to find all products

Then, add this code:

* @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {

        $request -> validate(
           [ 'name' => 'required',  'slug' => 'required',
             'description' => 'required' ,  'price' => 
             'required'
           ]
        );
        return Products::create($request->all());
    }

Here, the store method provides a way to create a new product in the database based on input data from the client, while also validating the input data to ensure that it meets certain requirements.

public function store(Request $request): This is the method definition. The public keyword indicates that the method can be accessed from outside the class, and store is the name of the method. The $request parameter is an instance of the Request class, which contains data from the HTTP request.

$request -> validate([ 'name' => 'required', 'slug' => 'required', 'description' => 'required' , 'price' => 'required' ]);: This line uses the validate method on the $request object to validate the input data from the client. In this case, the validation rules require the name, slug, description, and price fields to be present and not empty.

return Products::create($request->all());: This line creates a new product in the database using the create method on the Products model. The create method creates a new instance of the Products model using the input data from the client, and saves it to the database. The all() method on the $request object returns an array of all input data from the client.

After that, add the following code to find Product by Id, Delete Product by ID and Update Product by ID:

* @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        return Products::find($id);
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)

    {
        $product = Products::find($id);
        $product->update($request->all());
        return $product;
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
       return Products::destroy($id);
    }

The show function retrieves a product by its ID, the update function updates a product by its ID, and the destroy function deletes a product by its ID. Each of these functions returns an HTTP response that can be handled by a client-side application or another API.

Step 6: Create the public API Routes
Now, let's create the routes for our API. Open the routes/api.php file and add the following code:

//these are public routes
Route:: get('/products',[ProductController::class,'index']);
Route:: get('/products/{id}',[ProductController::class,'show']);

The first line defines a GET route for the indexmethod of the ProductController class. This route is accessible at the "/products" endpoint and will return a list of all products.

The second line defines a GET route for the "show" method of the ProductController class that expects an "id" parameter. This route is accessible at the "/products/{id}" endpoint and will return a single product with the specified ID.

Now, to secure some of our endpoint we will use Sanctum. We want that for a user to create, update and delete a product he must be authenticated. Before anything else lets do a quick setup of Sanctum in your project.

Install laravel Sanctum via composer using the command: composer require laravel/sanctum
Next, you should publish the Sanctum configuration and migration files using the command: php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider". This will create a table create_accesss_tokens in your database.
Migrate using the command php artisan migrate.
Now,you should add Sanctum's middleware to your api middleware group within your application's app/Http/Kernel.php file: Within the middlewareGroups array replace the second element of the array with following code :

 'api' => [
            \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
            \Illuminate\Routing\Middleware\ThrottleRequests::class.':api',
           \Illuminate\Routing\Middleware\SubstituteBindings::class,
         ],

Step 7: Create User Model and Migration
We need to have users who can be authenticated before accessing the secure endpoints. On your project's root directory run the command: php artisan make:model User --migration

Head over the migration folder, open the create_users_table file, and within its up function paste the following code:

Schema::create('users', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('email')->unique();
            $table->timestamp('email_verified_at')->nullable();
            $table->string('password');
            $table->rememberToken();
            $table->timestamps();
        });

This will create a users table with columns id, name, email, password, tokens and timestamps.
Now within the User Model class add :

protected $fillable = [
        'name',
        'email',
        'password',
    ];

Then run the command php artisan migrate to create the users table in your database.

Step 8: Create AuthController
The Authcontroller will handle the login, register and logout logic.

public function register(Request $request)
    {
$fields= $request->validate(
    [
        'name'=> 'required |string',
        'email' => 'required |unique:users',
        'password'=> 'required|confirmed'
    ]
    );
    $user = User::create([
        'name'=>$fields['name'],
        'email'=>$fields['email'],
        'password'=> bcrypt($fields['password'])
    ]);
    $token = $user->createToken('mytoken')->plainTextToken;
    $response =  [
        'user'=> $user,
        'token'=>$token

    ];
    return response($response, 201);

    }

Code Explanation
The register function accepts a HTTP request object as a parameter, which is used to validate the user's input fields. The method then creates a new user in the database with the validated input fields and hashes the user's password using the bcrypt function.

The user is then assigned a token using Laravel's built-in Sanctum package, which is returned along with the user's details in a response object with a status code of 201.

The createToken method is called on the authenticated user object and takes a string argument that serves as a name for the token. In this case, the name is mytoken.

The plainTextToken method is then called on the returned token object to retrieve the plain text version of the token. This token can be used for subsequent requests that require user authentication.

Login Logic This almost the same as register only that some few things differ. Add the following code to your AuthController:

public function login(Request $request)
    {
$fields= $request->validate(
    [

        'email' => 'required ',
        'password'=> 'required'
    ]
    );
    $user = User::where('email', $fields['email'])->first();

    if (!$user|| !Hash::check($fields['password'], $user->password)) {

        return response(
            [
                'message' => 'Bad creds'
            ]
            );
        # code...
    }
    $token = $user->createToken('mytoken')->plainTextToken;
    $response =  [
        'user'=> $user,
        'token'=>$token

    ];
    return response($response, 201);

    }

Code Explanation
The function It takes in a POST request with the email and password fields validated. It then checks if a user with the provided email exists in the database and whether the password provided matches the hashed password in the database using the Hash facade provided by Laravel.

If the user is not found or the password doesn't match, it returns a response with a message indicating bad credentials. If the user is found and the password matches, it generates a token for the user and returns a response with the user details and the token. The token can be used to authenticate subsequent requests to the server.

Logout Logic Add:

public function logout(Request $request){
        $request->user()->token()->delete();
       return [
        'message' => 'logged out'
       ];
    }

This retrieves the authenticated user using $request->user() and then deletes the user's token using the delete() method

Step 9: Created the protected API Routes
A user must be authenticated to access these routes. Add the following code to routes.api.php file:

// protected routes
Route::group(['middleware'=> ['auth:sanctum']], function(){
    Route::post('/products',[ProductController::class,'store']);
    Route::put('/products/{id}',[ProductController::class,'update']);
    Route::delete('/products/{id}',[ProductController::class,'destroy']);
    Route::post('/logout',[AuthController::class,'logout']);

});

Route::group() is a function that allows you to group multiple routes that share a common middleware. In this case, the middleware specified is auth:sanctum, which is used to protect the routes in the group and restrict access to authenticated users only.

When a user tries to access any route within the group, the auth:sanctum middleware will check if the user is authenticated by checking for the presence of a valid access token. If the user is not authenticated, they will be redirected to the login page or will receive an HTTP 401 Unauthorized status code.

By wrapping a set of routes within a Route::group()function with the specified middleware, it ensures that those routes are only accessible to authenticated users who have a valid access token.

Step 10: Test your endpoints with postman
Head over to Postman and test your endpoints. But first start your server by using the command php artisan serve

Since, there are no products in our database, lets first register a user to do so.
Use the endpoint http://localhost:8000/api/register

To Login use the endpoint http://localhost:8000/api/login

The response will have an authentication token that will be used to access protected routes.

Access protected routes after Authentication

Access protected routes without Authentication

Up to that point you can perform all the CRUD operations using the RESTful API you just created .

Here is a complete code of all we have done

Product Model

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Product extends Model
{
    use HasFactory;
    protected $fillable = [
    'name',
    'slug',
     'price',
     'description'
    ];
}

User Model

<?php

namespace App\Models;

// use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Laravel\Sanctum\HasApiTokens;

class User extends Authenticatable
{
    use HasApiTokens, HasFactory, Notifiable;

    /**
     * The attributes that are mass assignable.
     *
     * @var array<int, string>
     */
    protected $fillable = [
        'name',
        'email',
        'password',
    ];

    /**
     * The attributes that should be hidden for serialization.
     *
     * @var array<int, string>
     */
    protected $hidden = [
        'password',
        'remember_token',
    ];

    /**
     * The attributes that should be cast.
     *
     * @var array<string, string>
     */
    protected $casts = [
        'email_verified_at' => 'datetime',
    ];
}

ProductController

<?php

namespace App\Http\Controllers;

use App\Models\Products;
use Illuminate\Http\Request;

class ProductController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return Products::all();
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {

        $request -> validate(
           [ 'name' => 'required',  'slug' => 'required',
           'description' => 'required' ,  'price' => 'required'
           ]
        );
        return Products::create($request->all());
    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        return Products::find($id);
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)

    {
        $product = Products::find($id);
        $product->update($request->all());
        return $product;
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
       return Products::destroy($id);
    }

}

AuthController

<?php

namespace App\Http\Controllers;

use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Hash;

class AuthController extends Controller
{
    public function register(Request $request)
    {
$fields= $request->validate(
    [
        'name'=> 'required |string',
        'email' => 'required |unique:users',
        'password'=> 'required|confirmed'
    ]
    );
    $user = User::create([
        'name'=>$fields['name'],
        'email'=>$fields['email'],
        'password'=> bcrypt($fields['password'])
    ]);
    $token = $user->createToken('mytoken')->plainTextToken;
    $response =  [
        'user'=> $user,
        'token'=>$token

    ];
    return response($response, 201);

    }

    public function login(Request $request)
    {
$fields= $request->validate(
    [

        'email' => 'required ',
        'password'=> 'required'
    ]
    );
    $user = User::where('email', $fields['email'])->first();

    if (!$user|| !Hash::check($fields['password'], $user->password)) {

        return response(
            [
                'message' => 'Bad creds'
            ]
            );
        # code...
    }
    $token = $user->createToken('mytoken')->plainTextToken;
    $response =  [
        'user'=> $user,
        'token'=>$token

    ];
    return response($response, 201);

    }

    public function logout(Request $request){
        $request->user()->token()->delete();
        return response(null, 204);
    }
}

api.php

<?php

use App\Http\Controllers\AuthController;
use App\Http\Controllers\ProductController;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use Laravel\Sanctum\Sanctum;

/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/


// Route::resource('products', ProductController::class);

// public routes
Route:: post('/register',[AuthController::class,'register']);
Route:: get('/products',[ProductController::class,'index']);
Route:: get('/products/{id}',[ProductController::class,'show']);
Route:: post('/login',[AuthController::class,'login']);

// protected routes
Route::group(['middleware'=> ['auth:sanctum']], function(){
    Route::post('/products',[ProductController::class,'store']);
    Route::put('/products/{id}',[ProductController::class,'update']);
    Route::delete('/products/{id}',[ProductController::class,'destroy']);
    Route::post('/logout',[AuthController::class,'logout']);

});
Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
    return $request->user();
});

Conclusion
In this tutorial, we covered the basics of building a RESTful API with Laravel and Sanctum. We started by setting up our Laravel project and database, creating migration files, and defining our models and controllers. We also discussed how to handle requests and responses, including creating, retrieving, updating, and deleting resources. We explored the use of middleware for authentication and authorization, and how to create and use access tokens with Sanctum.

Overall, this tutorial provided a solid foundation for building a robust and secure API with Laravel and Sanctum.

That's all, Enjoy!

Create a pie chart using Angular and Springboot

Patrick Lusaya — Sat, 24 Dec 2022 20:05:38 +0000

Introduction

In this tutorial, we will learn how to create a pie chart in Angular using the ng2-charts library and retrieve data from a Springboot backend to populate the chart. The pie chart will display the number of patients in a hospital based on a particular visit type.

Prerequisites

Basic knowledge of Angular and Springboot.
Node.js and npm installed on your machine.
Angular CLI installed on your machine.
A PostgreSQL database set up and configured with Springboot.

Step 1: Set up the Angular project
First, let's create a new Angular project using the Angular CLI .Type the command ng new demoapp

Next, install the ng2-charts and chart js libraries by running the following command: npm install ng2-charts chart.js --save

This will install the latest version of both ng2-charts and Chart.js and save the dependencies in your package.json file.

Once the installation is complete, you can import the charts modules in your module where you want to use them. Here's an example of how you can do this:



import { NgChartsModule } from 'ng2-charts';

@NgModule({
  imports: [
    NgChartsModule
  ],
  // ...
})
export class MyModule {}

Step 2: Create the an entity class in your backend.
In your backend code, create an entity class called Patient to represent a patient in the database. Here i'm assuming you have already set up your springboot application to any database. The Patient class should have fields for the patient's ID and visit type.



@Entity
@Table(name = "patients")
public class Patient {
  @Id
  @GeneratedValue(strategy = GenerationType.IDENTITY)
  private Long id;
  private String visitType;

  // Getters and setters

}

Step 3: Create the repository interface.
Next, create a repository interface that extends JpaRepository and define a method to find the number of patients in each visit type.



public interface PatientRepository extends JpaRepository<Patient, Long> {

    @Query(value = "SELECT visit_type, COUNT(*) as count FROM patients GROUP BY visit_type", nativeQuery = true)
    List<Object[]> countByVisitType();
}

Code explanation

This is an interface that extends the JpaRepositoryinterface and defines a custom method called countByVisitType.

The JpaRepository interface is a Spring Data interface that provides basic CRUD (create, read, update, delete) operations for a given entity type. By extending this interface, the PatientRepository interface is able to inherit these basic CRUD methods and use them to perform database operations on Patient objects.

The countByVisitType method is a custom method that has been defined in the PatientRepository interface. It is annotated with @Query, which allows you to specify a custom query to be executed when the method is called.

The query in this case is SELECT visit_type, COUNT(*) as count FROM patients GROUP BY visit_type, which selects the visit_type column and the count of patients for each visit_type (SELECT visit_type, COUNT(*) as count) from the patients table (FROM patients) and groups the results by visit_type (GROUP BY visit_type).

The nativeQuery = true attribute indicates that the query is a native SQL query rather than a JPQL (Java Persistence Query Language) query.

The method is returning a List<Object[]> object, which is a list of arrays of objects. Each Object[] object in the list represents a row in the result set returned by the query, with the first element being the visit_typeand the second element being the count of patients for that type.

When this method is called, it will execute the specified query and return a list of Object[] objects representing the results of the query.

Step 4 Create the controller
In the controller, define an endpoint that returns the number of patients in each visit type as a JSON object with the visit type as the key and the number of patients as the value.



@RestController
@RequestMapping("/api/test")
@AllArgsConstructor
public class TestController {
  @Autowired
    private  final PatientRepository patientRepository;
 @GetMapping("/home")
    public Map<String, BigInteger> countByVisitType() {
        Map<String, BigInteger> result = new HashMap<>();
        List<Object[]> counts = patientRepository.countByVisitType();
        for (Object[] row : counts) {
            result.put((String) row[0], (BigInteger) row[1]);
        }
        return result;
    }}

Code explanation

@GetMapping("/home"), which means that it will handle HTTP GET requests to the /home endpoint.

The method returns a Map<String, BigInteger> object, which is a map that maps string keys to BigInteger values. The keys will represent the different types of visits, and the values will represent the number of patients that have visited for each type.

The method first creates an empty Map object called result and then retrieves a List of Object[] objects from the patientRepository object. Each Object[] object in the list represents a row in the result set returned by the repository's countByVisitType() method, which is likely a custom method that returns the number of patients that have visited for each type of visit.

The controller method then iterates over each Object[] object in the list and adds an entry to the result map by casting the first element of the array to a String (the type of visit) and the second element to a BigInteger(the number of patients that have visited for that type of visit). Finally, the method returns the result map.

Step 5: Create the pie chart component in Angular
In the Angular project, create a Home component to display the pie chart.To do this run the command ng g c home in your angular cli terminal. Then, declare properties pieChartData and pieChartLabels:



export class HomeComponent implements OnInit {
  pieChartData!: ChartData<ChartType, number[], string>;
  pieChartLabels: string[] = [];
}

pieChartData: This is a property of type ChartData<ChartType, number[], string>, which is a type provided by the Chart.js library.
ChartData represents the data for a chart, and is generic type that takes three type arguments:ChartType(the type of chart), number[] (the data), and string (the labels). In this case, pieChartData will be used to store the data for a pie chart.

pieChartLabels: This is an array of strings that will be used to label the slices of the pie chart.

Step 6: Get the data from the api
Use http client to fetch data from your endpoint.



...
constructor(private http : HttpClient){}
ngOnInIt(): void{
 this.http.get<any>('http://localhost:8080/api/test/home').subscribe(data => {
    this.pieChartLabels = Object.keys(data);
    this.pieChartData = {
      labels: this.pieChartLabels,
      datasets: [
        {
          data: Object.values(data),
          backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56' , 'grey'],
          hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56' , 'grey'],
        },
      ],
    };
  });

}

The method ngOnInIt makes an HTTP GET request to the http://localhost:8080/api/test/home URL using the HttpClient service, which is a service provided by Angular for making HTTP requests. The response from the server is expected to be an object with string as keys and BigInteger as values, and is stored in a variable called data.

The method then sets the pieChartLabels property to the keys of the data object using the Object.keys method, which returns an array of the keys of an object.

The pieChartData property is then set to an object with the following structure:

labels: An array of strings that will be used to label the slices of the pie chart. This is set to the pieChartLabels property.

datasets: An array of objects that represent the data for the chart. Each object in the array has the following properties:

data: An array of numbers that represents the data for the chart. This is set to the values of the data object using the Object.values method.

backgroundColor: An array of strings that represents the background color for each slice of the pie chart.

hoverBackgroundColor: An array of strings that represents the background color for each slice of the pie chart when the mouse is hovering over it.
This pieChartData object is then used to configure and display a pie chart using the Chart.js library.

Step 7: Display the pie chart in the template
Finally, we can display the pie chart in the template by using the baseChart directive from the ng2-charts library.



<div style="width: 440px; height: 440px;" >
       <canvas class="pie-chart"  baseChart  
          [data]="pieChartData"
          [labels]="pieChartLabels"
          [type]="'pie'" 
          >  
        </canvas>
  </div>

Now run your springboot application and navigate to the Home component of your demoapp and a piechart will displayed.

Here is the full HomeComponent class



export class HomeComponent implements OnInit {
  pieChartData!: ChartData<ChartType, number[], string>;
  pieChartLabels: string[] = [];
  constructor(private http : HttpClient)   { }
  ngOnInit(): void {
  this.http.get<any>('http://localhost:8080/api/test/home').subscribe(data => {
    this.pieChartLabels = Object.keys(data); 
    this.pieChartData = {
      labels: this.pieChartLabels,
      datasets: [
        {
          data: Object.values(data),
          backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56' , 'grey'],
          hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56' , 'grey'],
        },
      ],
    };
  });

  }


  }

Conclusion
In this tutorial, we learned how to create a pie chart in Angular using the ng2-charts library and retrieve data from a Springboot backend to populate the chart. We also learned how to create a repository interface and a controller to fetch the data and return it as a JSON object.

I hope this tutorial was helpful. If you have any questions or comments, please let me know in the comments section below. Happy coding!