DEV Community: Mahesh B

Crafting your own AI chat app using Hilla and Spring AI

Mahesh B — Wed, 22 Nov 2023 08:34:15 +0000

Artificial intelligence has surpassed its niche to become a fundamental part of our daily lives, revolutionizing the way we engage with technology. The incorporation of powerful AI capabilities within applications has stimulated innovation and revolutionized user experiences in this era of seamless connectivity and rapid improvements.

If you have been keeping up to date with the Spring ecosystem, you may have heard about the Spring AI Project, It is currently in its pre-release state but it provides an innovative abstraction toolkit fostering AI integration across applications. The experimental Spring AI project was introduced during the SpringOne conference and allows the creation of AI applications by using common concepts of Spring. Currently, the project integrates Azure OpenAI and OpenAI as AI backends. Use cases like content generation, code generation, semantic search, and summarization are supported by the project.

In this article, we’ll embark on a journey through the convergence of Spring AI’s versatile abstractions and Hilla’s dynamic chat functionalities to create a powerful AI-driven chat application. Let's get started.

There are many ways to go about setting up the project, you can either include the Maven dependency for Hilla directly into your project, or you can visit Vaadin Starter to obtain the starter project.

In our case, we are going to download the project from Vaadin Starter with the following presets:

Once the project has been downloaded you can open it in the IDE of your choice, I use IntelliJ Idea. Now let's add the Spring AI dependency.

The Spring AI project provides artifacts in the Spring Milestone Repository. You will need to add configuration to add a reference to the Spring Milestone repository in your build file. For example, in our case ie. for Maven, add the following repository definition in Your POM.xml file.

<repositories>
    <repository>
      <id>spring-snapshots</id>
      <name>Spring Snapshots</name>
      <url>https://repo.spring.io/snapshot</url>
      <releases>
        <enabled>false</enabled>
      </releases>
    </repository>
  </repositories>

And the Spring Boot Starter depending on if you are using Azure Open AI or Open AI.
Azure OpenAI

<dependency>
    <groupId>org.springframework.experimental.ai</groupId>
    <artifactId>spring-ai-azure-openai-spring-boot-starter</artifactId>
    <version>0.7.1-SNAPSHOT</version>
</dependency>

OpenAI

<dependency>
    <groupId>org.springframework.experimental.ai</groupId>
    <artifactId>spring-ai-openai-spring-boot-starter</artifactId>
    <version>0.7.1-SNAPSHOT</version>
</dependency>

We will be using the openai dependency for our use case here so go ahead and add the dependency and reload the project to download all the necessary files. If it’s properly imported you will get a folder structure similar to this:

Let's edit this to add our UI using some prebuilt components from Hilla. We will go ahead and rename MainView.tsx to MainLayout.tsx, add this to MainLayout

import {AppLayout} from '@hilla/react-components/AppLayout.js';
import {DrawerToggle} from '@hilla/react-components/DrawerToggle.js';
import Placeholder from 'Frontend/components/placeholder/Placeholder';
import {useRouteMetadata} from 'Frontend/util/routing';
import {Suspense} from 'react';
import {NavLink, Outlet} from 'react-router-dom';

const navLinkClasses = ({ isActive }: any) => {
  return `block rounded-m p-s ${isActive ? 'bg-primary-10 text-primary' : 'text-body'}`;
};

export default function MainLayout() {
  const currentTitle = useRouteMetadata()?.title ?? 'My App';
  return (
    <AppLayout primarySection="drawer">

      <DrawerToggle slot="navbar" aria-label="Menu toggle"></DrawerToggle>
      <h2 slot="navbar" className="text-l m-0">
        {currentTitle}
        <span style={{ fontSize: 'small', color: 'red'}}>
         &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  (The spring ai package currently doesn't stream response, hence responses will be delayed for longer responses)</span>
      </h2>

      <Suspense fallback={<Placeholder />}>
        <Outlet />
      </Suspense>
    </AppLayout>
  );
}

Here we are importing AppLayout and DrawerToggle from the @hilla/react-components package for layout elements. App Layout is a component for building common application layouts. The Drawer Toggle shows and hides the drawer using a Drawer Toggle (or a Button). Placeholder is a custom component that we are going to be defining below containing the progress bar for now. useRouteMetadata from 'Frontend/util/routing' will be used for fetching route metadata. Suspense, NavLink, and Outlet from react and react-router-dom for managing asynchronous loading, navigation, and rendering of nested routes.

The navLinkClasses defines a function navLinkClasses that accepts a parameter (isActive), which is used to determine the active state of navigation links. The MainLayout component uses useRouteMetadata() hook to fetch the current title from route metadata, defaulting to 'My App' if unavailable and renders the layout structure. It utilizes AppLayout from Hilla, setting primarySection="drawer" for layout configuration. It implements a component with a fallback for rendering the content using , allowing for nested routes to be rendered dynamically.

Now we will create a new chat package and add the ChatView Component to chat as shown below :

import {useState} from "react";
import {MessageList, MessageListItem} from "@hilla/react-components/MessageList";
import {MessageInput} from "@hilla/react-components/MessageInput";
import {AiService} from "Frontend/generated/endpoints";
import user from "Frontend/resources/user-profile.png"
import assistant from "Frontend/resources/virtual-assistant.png"

export default function ChatView() {
    const [messages, setMessages] = useState<MessageListItem[]>([]);

    async function sendMessage(message: string) {
        setMessages(messages => [...messages, {
            text: message,
            userName: 'You',
            time: new Date().toLocaleTimeString(),
            userImg: user,
            theme: 'current-user',
        }]);

        const response = await AiService.chat(message);
        setMessages(messages => [...messages, {
            text: response,
            userName: 'Assistant',
            userImg: assistant,
            time: new Date().toLocaleTimeString()
        }]);
    }

    return (
      <div className="p-m flex flex-col h-full box-border">
          <MessageList items={messages} className="flex-grow"/>
          <MessageInput onSubmit={e => sendMessage(e.detail.value)}/>
      </div>
    );
}

This ChatView component sets up a simple chat interface utilizing components from the Hilla framework for message input and display. It maintains the state of messages using React's useState hook. The component initializes an empty array, messagesto store chat messages and uses the useState hook to manage this state. The sendMessage function is an asynchronous function triggered when a message is sent.

Upon sending a message, it updates the local messages state to include the user's message, displaying it within the chat interface. It then asynchronously calls the AiService.chat(message) method, likely an endpoint from the generated AiService class, to interact with an AI service. Upon receiving a response, it updates the messages state again, this time displaying the assistant's response within the chat.

The structure of the returned JSX involves a container div with a flex layout to manage the chat view's appearance. Inside this container, it renders the MessageList component from Hilla, displaying the chat messages. The MessageInput component allows users to input messages and triggers the sendMessage function upon submission.

This component orchestrates a chat interface where users can interact by sending messages, and it dynamically updates the chat display with both user and AI-generated responses.

Now, we will add a new package for other components we are going to be adding like this

We will add the PlaceHolder component here as follows :

import { ProgressBar } from '@hilla/react-components/ProgressBar.js';

export default function Placeholder() {
  return <ProgressBar indeterminate={true} className="m-0" />;
}

The Placeholder component is a simple component that displays a progress bar using the ProgressBar component from the Hilla framework. When you’re waiting for something to load or when you want to show that some process is ongoing (like fetching data or performing an action), you often use a visual indicator to let users know that the system is working. In this case, the ProgressBar serves as that indicator.

We will now update the new routes in our application in the routes.tsx file

import ChatView from 'Frontend/views/chat/ChatView';
import MainLayout from 'Frontend/views/MainLayout.js';
import { lazy } from 'react';
import { createBrowserRouter, RouteObject } from 'react-router-dom';


export const routes: RouteObject[] = [
  {
    element: <MainLayout />,
    handle: { title: 'Main' },
    children: [
      { path: '/', element: <ChatView />, handle: { title: 'AI Chat' } }
    ],
  },
];

export default createBrowserRouter(routes);

We will then add the AI Service to facilitate the chat for this we will be referencing the Spring AI Apis.

package com.maheshbabu11.service;

import com.vaadin.flow.server.auth.AnonymousAllowed;
import dev.hilla.BrowserCallable;
import org.springframework.ai.client.AiClient;

@BrowserCallable
@AnonymousAllowed
public class AiService {

    private final AiClient aiClient;

    public AiService(AiClient aiClient) {

        this.aiClient = aiClient;
    }

    public String chat(String prompt) {
        return aiClient.generate(prompt);
    }
}

Here @BrowserCallable indicates that this class or its methods can be called from the browser and AnonymousAllowed allows this class or methods within it to be accessed anonymously, typically used in web-related security configurations.

You will also need to add your OpenAI keys in the application.properties file.

spring.ai.openai.api-key=<Open AI Key>

With all that set and configured, we can run the project. Once the application starts running, you can open it in your browser on port 80 and see it as shown below :

You can check the full source code here 👇

GitHub - MaheshBabu11/ChatGPTClone: ChatGPTClone using Hilla and Spring AI

For more info about Spring AI or Hilla, you can check the resources below:

Happy Coding 😊!!!

Exploring Resilience4j: Enhancing Circuit Breaker Patterns for Robust Applications

Mahesh B — Wed, 08 Nov 2023 07:13:46 +0000

In today’s interconnected world, where applications are expected to handle increasing loads and maintain high availability, building resilient systems is crucial. One of the key challenges in creating robust applications lies in handling failures and mitigating their impact. This is where circuit breakers come into play. Circuit breakers act as a protective shield, isolating faulty services and preventing cascading failures across the system.

In this article, we delve into the world of circuit breakers and explore the powerful capabilities of Resilience4j, a popular resilience library for Java applications. Resilience4j provides a comprehensive set of tools and patterns that enable developers to implement resilient solutions effectively.

Throughout this article, we will unravel the concept of circuit breakers and explain how Resilience4j enhances their functionality. We will examine the various strategies and configurations available in Resilience4j that can be leveraged to build fault-tolerant systems. Additionally, we will discuss best practices and implementation tips to maximize the benefits of Resilience4j in your applications.

So, let’s embark on this journey into the world of circuit breakers and discover how Resilience4j can help us build resilient systems that gracefully handle failures and maintain high performance.

What is a circuit breaker ?

A circuit breaker is a software design pattern used in distributed systems to improve fault tolerance and resilience. Inspired by the electrical circuit breaker, which protects electrical circuits from damage caused by excessive current, the software circuit breaker acts as a safety mechanism for services or components within an application.

The primary purpose of a circuit breaker is to prevent cascading failures in a distributed system. When a service or component fails or experiences abnormal behavior, such as slow response times or errors, the circuit breaker trips and starts redirecting calls to a predefined fallback mechanism or returns an error response directly. By doing so, it isolates the faulty component from the rest of the system, limiting the impact of the failure and allowing the system to gracefully degrade.

A circuit breaker operates based on a set of predefined conditions and thresholds. It monitors the number of failures or errors that occur within a certain time period and compares them against configured thresholds. If the error rate exceeds a threshold, the circuit breaker trips, indicating that the component or service is in a problematic state. While the circuit breaker is open, subsequent requests are not forwarded to the failing component, reducing the load on the component and preventing further damage.

In addition to fault isolation, circuit breakers also provide mechanisms for self-healing. After a specified period of time, the circuit breaker allows a limited number of requests to be sent to the failing component to check if it has recovered. If those requests are successful, the circuit breaker closes again, allowing normal operations to resume. If the requests continue to fail, the circuit breaker remains open, preventing further damage and allowing the system to adapt accordingly.

To illustrate the concept of a circuit breaker, let’s consider a practical example. Imagine you have an API endpoint /countries in your application that fetches a list of countries. To retrieve this data, your application relies on an external API, let’s say [https://restcountries.com/v3.1/all](https://restcountries.com/v3.1/all`). However, if this external API goes down or becomes unavailable, it would result in errors being thrown by your application.

By implementing a circuit breaker pattern, you can mitigate the impact of such failures and introduce a fallback mechanism. Here’s how it works:

Normal Operation:
During normal operation, when the external API is up and running, the circuit breaker remains in a closed state, allowing requests to flow through seamlessly. Your application retrieves the list of countries from the external API and serves the data to the users.
Failure Detection:
If the external API experiences issues and starts responding with errors or becomes unresponsive, the circuit breaker detects this abnormal behavior by monitoring the failure rate or response times. Once the predefined threshold is exceeded, the circuit breaker trips, transitioning to an open state.
Fallback Mechanism:
When the circuit breaker is in the open state, instead of allowing requests to reach the failing external API, it redirects them to a fallback method or a pre-defined response. In the context of our example, the fallback method could be retrieving a cached version of the country list or providing a default list.
Automatic Recovery:
To periodically check if the external API has recovered, the circuit breaker allows a limited number of requests to pass through after a certain duration. If these requests are successful, indicating that the external API is functioning again, the circuit breaker transitions back to the closed state, resuming normal operations. However, if the requests continue to fail, the circuit breaker remains open to prevent further damage.

By incorporating a circuit breaker, you can ensure that your application gracefully handles the failure of the external API and provides a fallback mechanism to maintain functionality even in the absence of external data. This not only improves the resilience of your application but also enhances the user experience by mitigating the impact of external service failures.

Additionally, circuit breakers offer configurability to define thresholds, timeouts, and other parameters, allowing you to fine-tune the behavior based on your specific requirements. They provide a valuable tool in building robust and reliable systems that can adapt to changing conditions and ensure uninterrupted service delivery.

Next, we will explore how to develop a Spring Boot application and incorporate Resilience4j to implement a circuit breaker.

LETS GET STARTED !

Lets head to https://start.spring.io/ and configure the project as shown below :

We are going to be using Java 17 for this project , The dependencies that we are going to be using are :

Spring Web
Spring Boot Actuator

Now lets open the project in the ide of your choice. I am going to be using Intellij Idea.

After setting up the project as discussed in the previous example, I have created a CountriesController in my Spring Boot application. This controller is responsible for handling the /countries endpoint, which retrieves the list of countries from an external API.

In the CountriesController class, I have implemented the necessary logic to make the API call to the external API endpoint (https://restcountries.com/v3.1/all) and fetch the list of countries. I have used the RestTemplate class from Spring to handle the HTTP request and retrieve the response.

By invoking the /countries API endpoint, you will receive the list of countries as a response. The source code is available here.

Now, let’s make a request to the /countries API endpoint and observe the outcome. We get the list of countries as shown below.

Now, let’s see what happesns when https://restcountries.com/v3.1/all API is unavailable. In such a case, instead of receiving the expected response, our application will encounter an error and display a generic "white label" error page.

Now, let’s delve into the benefits of incorporating a circuit breaker to avoid encountering errors, such as the “white label” error page, when the https://restcountries.com/v3.1/all API becomes unavailable.

Lets configure the circuit breaker in our application, for that lets add these dependencies.

<dependency>
   <groupId>io.github.resilience4j</groupId>
   <artifactId>resilience4j-spring-boot3</artifactId>
   <version>2.0.2</version>
 </dependency>
 <dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-aop</artifactId>
 </dependency>

Next, we’ll configure the application to utilize the circuit breaker by making the necessary configurations in the applications.yml file.

spring:
  application.name: CircuitBreakerDemo
  jackson.serialization.indent_output: true

management:
  endpoints.web.exposure.include:
    - '*'
  endpoint.health.show-details: always
  health.circuitbreakers.enabled: true

resilience4j.circuitbreaker:
  configs:
    default:
      registerHealthIndicator: true
      slidingWindowSize: 10
      minimumNumberOfCalls: 5
      permittedNumberOfCallsInHalfOpenState: 3
      automaticTransitionFromOpenToHalfOpenEnabled: true
      waitDurationInOpenState: 5s
      failureRateThreshold: 50
      eventConsumerBufferSize: 10

Given below is a simple explanation of parameters that we have configured.

resilience4j.circuitbreaker: This specifies the configuration for the circuit breaker module of Resilience4j.
configs: This defines the different circuit breaker configurations. In this case, there is a single configuration named "default".
registerHealthIndicator: This parameter determines whether to register a health indicator for the circuit breaker. It allows monitoring the circuit breaker's health status.
slidingWindowSize: This sets the size of the sliding window used by the circuit breaker to track the success and failure rates of calls.
minimumNumberOfCalls: This specifies the minimum number of calls required within the sliding window before the circuit breaker can calculate the success or failure rate.
permittedNumberOfCallsInHalfOpenState: This sets the maximum number of calls allowed when the circuit breaker is in the half-open state. If this limit is exceeded, the circuit breaker transitions back to the open state.
automaticTransitionFromOpenToHalfOpenEnabled: This parameter enables or disables automatic transition from the open state to the half-open state when the wait duration in the open state has passed.
waitDurationInOpenState: This determines the duration that the circuit breaker remains in the open state before transitioning to the half-open state. In this case, it is set to 5 seconds.
failureRateThreshold: This sets the failure rate threshold in percentage. If the failure rate exceeds this threshold within the sliding window, the circuit breaker transitions to the open state.
eventConsumerBufferSize: This parameter determines the size of the buffer used by the event consumer for tracking circuit breaker events.

Now lets add the circuit breaker to our code and see it in action.

@GetMapping("/countries")
    @CircuitBreaker(name = "countriesCircuitBreaker", fallbackMethod = "getCountries")
    public List<Object> getCountries() throws Exception {
        return countriesService.getCountries();
    }

    public List<Object> getCountries(Throwable throwable) {
        List<Object> countries = new ArrayList<>();
        countries.add("Country service unavailable!");
        return countries;
    }

Here we can see that when the external service is unavailable it returns a message “Country service unavailable!”.

Note : The fallback method should have the same parameter list and return type as the circuit breaker method.

These are the controller and service classes that I have utilized.

Lets see the application in action , Instead a getting a white label fall back page , we will get a proper message, this can be also modified to return a local list of countries until the external api is available.

Now if go to https://localhost:8080/actuator/health we can see the details about the circuit breaker. Here we can see that the circuit breaker is up and in a closed state.

When the external API becomes unavailable, the circuit breaker triggers and opens the circuit, leading to a fallback method being invoked. In this scenario, we can observe that the circuit is open, along with additional information about failed calls and calls that were not permitted.

In conclusion, implementing a circuit breaker using Resilience4j can greatly enhance the resilience of our applications by providing fault tolerance and preventing failures from propagating throughout the system. By following the guidelines and examples provided in this article, developers can effectively incorporate circuit breakers into their applications and build more robust and reliable systems.

Happy coding!
GitHub - MaheshBabu11/CircuitBreaker: This is a demo application showing how we can use circuit…

From Backend to Frontend: Full Stack Java Apps with Spring Boot and Vaadin Flow

Mahesh B — Thu, 02 Nov 2023 13:11:04 +0000

In an era where numerous JavaScript frameworks for UI development abound, you might wonder why there’s a need for yet another UI framework. However, consider this: What if I were to reveal that you can harness the power of a well-established language like Java to craft an entire full-stack application?

Introducing Vaadin Flow a unique full-stack framework that lets you build web apps without writing HTML or JavaScript. Much like building a traditional desktop application, you compose the UI from components, connect it to a data source, and react to user events. The UI runs on the JVM without the need to expose REST services or come up with other ways to move data to the browser.

Flow apps are rendered in the browser as standard HTML. They work in all modern browsers and devices, no plugins are required. Vaadin offers a rich collection of attractive UI elements, including form inputs, dialogs, data grids, and visualizations. You have the flexibility to enhance these components and construct custom compositions right within your Java code. Furthermore, everything is constructed using open web standards and is compatible with all contemporary web browsers. You can read more about Vaadin Flow here.

Let’s dive right in and build a straightforward to-do application to showcase how simple it is to create an app using vaadin flow.

Step 1: Getting started

There are multiple approaches to begin the process. You can either include the Maven dependency for Vaadin directly into your project, or you can visit Vaadin Starter to obtain the starter project.

In our case, we are going to download the project from Vaadin Starter with some custom presets. Download 👉 here.

Step 2: Setup environment and launch the app

Feel free to use your preferred code editor; in my case, I’m using IntelliJ. After importing the downloaded project, make sure to install all the necessary dependencies and launch the application, It will open a page something like this :

Now let's explore the folder structure in our project, you can see that it's a bit different from your traditional spring boot application.

There is a frontend folder that contains the components and styles that we can use in the UI layer of the project. The style.css and theme.json are the global styles that are applied on the todo theme under the theme folder. You can have multiple themes and can switch between them. Now coming down we can see that there are views, these are basically where we add the UI views/routes, etc.

If you take a look at the Application.java file we can see that our application is implementing AppShellConfigurator which is an interface to configure application features and the host page where the Vaadin application is running. It automatically configures the index.html page. The Theme annotation can be used to choose the theme that we want to use configured in the themes folder.

Step 3: Configuring the application

Let's remove all the existing views and add a new view called TodoView.java

Here we extend the VerticalLayout class from vaadin. Vertical Layout places components top-to-bottom in a column. By default, it has 100% width and undefined height, meaning its width is constrained by its parent component, and its height is determined by the components it contains. The Route tag sets the path for the page/view since we are leaving it blank it is the default page. Now start the application and we can see that the page has an H1 tag with Hello world

Let's start creating the Todo app now. First, let's configure the h2 database and spring starter data JPA as a maven dependency in our project. We are going to be saving all the data in an in-memory H2 database.

 <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <dependency>
            <groupId>com.h2database</groupId>
            <artifactId>h2</artifactId>
            <scope>runtime</scope>
        </dependency>

We can configure the h2 database in the application.properties file.

spring.datasource.url=jdbc:h2:mem:todo
spring.datasource.driverClassName=org.h2.Driver
spring.datasource.username=todo
spring.datasource.password=todo
spring.jpa.database-platform=org.hibernate.dialect.H2Dialect

Now we can start adding the data classes and create the view, Refer to the files below:

In the above TodoView.java we are configuring the view. Here we have :

A Text box for entering the task,
An ADD button to add the task which also has a keyboard listener that listens for the ENTER key press to add the task when it's pressed.
A vertical layout with a checkbox to show all the to-do tasks and a checkbox click marks the task as completed.

Once we run the application we get a view like this

Once we start adding tasks, the view is rendered like this :

You can check the full source code here 👇
GitHub - MaheshBabu11/VaadinToDo: This is a demo project using vaadin flow in Spring boot.

In conclusion, we have successfully developed a full-stack application using the powerful combination of Java, Vaadin Flow for the front end, and Spring Boot for the back end. This approach allows developers to harness the capabilities of Java throughout the entire application, from creating visually appealing user interfaces to handling the back-end logic and data management. The result is a seamless and efficient full-stack solution that can be extended, customized, and deployed to meet a wide range of web application needs.

For more info, you can refer to these resources :

Happy Coding 😊!!!

Supercharge Your Alerts: Ntfy — The Ultimate Push Notification Solution

Mahesh B — Mon, 18 Sep 2023 07:23:59 +0000

Scripts and command-line tools have evolved into essential tools for developers, sysadmins, and tech aficionados in today’s fast-paced world of technology and automation. These lines of code have tremendous power because they can automate processes, manage data, and plan intricate workflows. Nevertheless, despite their usefulness, scripts occasionally behave as the silent characters in our online dramas, toiling away silently in the background.

But what if your scripts could talk for themselves and let you know when they needed to say something? What if they could notify you when they made a mistake or finished a task successfully? Enter ntfy, the unseen hero who uses push notifications to bring your scripts to life.

We’ll introduce you to ntfy (pronounced “notify”), a clever HTTP-based notification system, in this article. We’ll introduce you to ntfy (pronounced “notify”), a clever HTTP-based notification system, in this article. Now, let’s delve into the setup process. There are various approaches to setting up ntfy; you have the option to utilize the hosted services offered by ntfy.sh, both in free and paid versions, or you can opt to establish your very own ntfy server. Additionally, ntfy extends its functionality through dedicated Android and iOS applications, as well as a web application, enabling you to send and receive notifications seamlessly.

In this example, we’ll set up our own notification server on AWS and utilize it to send notifications to the Android app. Let’s get this party started.

Firstly let's set up the ntfy service using the docker container. We’ll assume you have docker installed on your local machine/AWS Virtual Machine for this example.

Now let's start a docker container containing the latest ntfy image. The server exposes its web UI and the API on port 80, so you need to expose that in Docker. Let's run the command below to start the server.

sudo docker run -p 80:80 -itd binwiederhier/ntfy serve

This command will pull the image and start the container.

Now let's see if it's running using the command:

sudo docker ps

We can see that it's running successfully.

If you open your DNS address on a new tab you can see that the web app for ntfy is running.

Now let’s download the Android app for ntfy from the Play Store.

Once you have the app set up on your phone, you need to change the ntfy server from the default server to the DNS of your server as shown below.

Ok before jumping in let's understand the concept of topics. In the context of ntfy, a “topic” typically refers to a category or channel to which notifications can be sent. It allows you to organize and group notifications based on their content or purpose. Users can subscribe to specific topics to receive relevant notifications, and senders can target their messages to specific topics for a more focused communication approach. Topics provide a way to streamline and manage notifications within the ntfy system.

Now we know what a topic is let's send our first notification, for this I am using a terminal, u can use the web app/Android app to do the same.

We can use the below curl command, here “Hello World!” is the message ec2–13–126–200–147.ap-south-1.compute.amazonaws.com is the DNS of our notification server and hello is our topic. So whoever subscribes to the topic hello on this server gets the notification.

curl -d "Hello World!" ec2-13-126-200-147.ap-south-1.compute.amazonaws.com/hello

We can see that we are getting the notification. Now let's do something more interesting like sending a notification if a service is down or if it's up etc. In this example I am going to do a ping to see if my website is up if it's up it will send me it’s up else it will send me it’s down. Use the command below :

ping maheshbabu11.dev -c 3 && curl -d "Its up!" ec2-13-126-200-147.ap-south-1.compute.amazonaws.com/hello || curl -d "Its down!" ec2-13-126-200-147.ap-south-1.compute.amazonaws.com/hello

This will return it's up because my website is up. You can use it to set up any type of notification for processes, cron jobs, downloads etc.

This is just a fraction of what it can do, there are lots of customization options, configurations, and security features offered by ntfy. The official website https://ntfy.sh/ contains all the details needed to get started. You can also check out https://docs.ntfy.sh/ for the official documentation.

Look out for some related stuff I am currently workin on.

Happy coding 😇.