Article

Software Development

Zoho

Unleashing the Power of Zoho Catalyst DevOps: A Practical Look at DevOps Part 1

Posted on April 24, 2024

By Mike Dranginis

May 25, 2024

Unleashing the Power of Zoho Catalyst DevOps: A Practical Look at DevOps Part 1

Zoho Catalyst DevOps is a platform crafted to enhance collaboration among software teams. It bridges the gap between development and operations, facilitating seamless teamwork. The platform emphasizes task automation and flawless software delivery. It encompasses a suite of tools designed for building dependable software through robust continuous integration and deployment practices. In the first of a series of articles, we’ll explore the various components, delve into why they’re essential, and demonstrate how they can fortify your software development lifecycle. Let’s dive in!

Catalyst DevOps Components

Catalyst DevOps has three primary components, each offering a suite of services designed to streamline and enhance the software development lifecycle.

Monitoring for Peak Performance

Monitoring resource usage, response times, and error rates is crucial for maintaining the health and performance of software systems. This vigilance helps teams detect and rectify issues before they affect the user experience.

Catalyst DevOps leverages several advanced tools for monitoring, equipped with alert systems to promptly notify teams about anomalies, ensuring rapid response to incidents.

  • Application Alerts: Instant email notifications for application issues help teams act quickly to maintain service quality.
  • Logs: Detailed logs from serverless functions and services aid in pinpointing errors, crucial for troubleshooting and maintenance.
  • Metrics: Insights into resource utilization across components enable data-driven optimization strategies, directly impacting project efficiency and profitability.
  • Application Performance Monitoring (APM): Offers in-depth analysis of serverless functions, identifying performance issues for immediate rectification.

Quality Through Automation

Delivering software that stands the test of user expectations requires a foundation built on rigorous quality assurance, ensuring that every piece of code is not just created but crafted to meet the highest standards of reliability and performance. In the realm of Catalyst DevOps, the emphasis on integrating the right protocols and tools within the DevOps pipelines is non-negotiable.

Central to this endeavor is the role of automated testing, a critical mechanism that significantly reduces the burden on quality assurance teams by ensuring comprehensive coverage and continuous validation. Automated testing transforms QA from a reactive task to a proactive strategy, helping teams preemptively spot and solve problems.

Catalyst DevOps elevates automated testing by offering customizable test cases that align with your specific requirements. Within a singular test suite, you can encompass multiple test scenarios, each designed to validate different facets of your application. Moreover, the flexibility to schedule these test cases adds a layer of automation that ensures continuous quality checks without manual intervention, making the process both efficient and effective.

Leveraging Repositories for Streamlined Development

Utilizing version control systems like Git, repositories enable a collaborative development environment where team members can work simultaneously on the same codebase without conflicts. They are foundational to Continuous Integration (CI) and Continuous Deployment (CD) practices, offering a well-structured and orderly framework for managing code alterations.

When developers push changes to a repository, it initiates automated builds and tests, crucial steps that uphold the quality of the code. The use of branching and merging strategies within these repositories supports simultaneous development activities and the seamless integration of new functionalities. Catalyst enhances this process by integrating with GitHub repositories. This integration is essential for fostering a collaborative development environment where version control is paramount. It simplifies the management of code changes, making the development process more efficient and less prone to errors.

Want to learn more? Book a meeting with us today!

Let’s Get Practical: Putting Catalyst DevOps into Action

Now that we have a little bit of background on the components that are included in Zoho Catalyst DevOps, let’s create a practical project that will demonstrate these components in action. For this purpose, we will be creating an expense-tracking application with frontend and catalyst serverless functions. To accomplish this, make sure you have the following:

(For functions, we will be going with advanced IO. For the project, we will be going with basic javascript.)

Frontend

Within the basic webapp, we have the following files:

A graphical representation of a software development environment showing a folder named

Next, let us add code in each of the files for our expense tracker. The code itself is simple.

Index.html

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Expense Tracker</title>
   <link rel="stylesheet" href="main.css" />
 </head>
 <body>
   <div id="container">
     <div id="app">
       <h1>Expense Tracker</h1>

       <div id="addExpenseForm">
         <input type="text" id="description" placeholder="Description" />
         <input type="number" id="amount" placeholder="Amount" />
         <button onclick="addExpense()">Add Expense</button>
       </div>

       <table id="expenses">
         <thead>
           <tr>
             <th>Description</th>
             <th>Amount</th>
           </tr>
         </thead>
         <tbody id="expenseList"></tbody>
       </table>
     </div>
   </div>

   <script src="main.js"></script>
 </body>
</html>

Main.css

#container {
 font-family: Arial, sans-serif;
 margin: 0;
 padding: 0;
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100vh;
 background-color: #f4f4f4;
}

#app {
 text-align: center;
}

#expenses {
 margin-top: 20px;
 border-collapse: collapse;
 width: 100%;
}

#expenses th,
#expenses td {
 padding: 10px;
 border: 1px solid #ddd;
}

#addExpenseForm {
 margin-top: 20px;
 display: flex;
 flex-direction: column;
 max-width: 300px;
 margin-left: auto;
 margin-right: auto;
}

#addExpenseForm input,
#addExpenseForm button {
 margin-bottom: 10px;
 padding: 8px;
}

Main.js

const expenseList = document.getElementById("expenseList");
const descriptionInput = document.getElementById("description");
const amountInput = document.getElementById("amount");

// Function to fetch and display expenses
async function fetchExpenses() {
 try {
   const response = await fetch("/server/expense_tracker_function/expenses");
   const data = await response.json();

   // Clear existing expenses
   expenseList.innerHTML = "";
   if (data.length === 0) {
     const newRow = document.createElement("tr");
     newRow.innerHTML = `
               <td colspan="2">No expenses yet</td>
           `;
     expenseList.appendChild(newRow);
   }

   // Display new expenses
   data.forEach((expense) => {
     const newRow = document.createElement("tr");
     newRow.innerHTML = `
               <td>${expense.description}</td>
               <td>${expense.amount.toFixed(2)}</td>
           `;
     expenseList.appendChild(newRow);
   });
 } catch (error) {
   console.error("Error fetching expenses:", error);
 }
}

// Function to add a new expense
async function addExpense() {
 const description = descriptionInput.value.trim();
 const amount = parseFloat(amountInput.value);

 if (description && !isNaN(amount)) {
   try {
     const response = await fetch(
       "/server/expense_tracker_function/expenses",
       {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
         },
         body: JSON.stringify({ description, amount }),
       }
     );

     if (response.ok) {
       // Fetch and display updated expenses after adding a new one
       fetchExpenses();

       // Clear input fields
       descriptionInput.value = "";
       amountInput.value = "";
     } else {
       console.error("Failed to add expense:", response.statusText);
     }
   } catch (error) {
     console.error("Error adding expense:", error);
   }
 } else {
   alert("Please enter valid description and amount.");
 }
}

// Fetch and display initial expenses on page load
fetchExpenses();

Serverless Functions

Next, we’ll create the serverless functions that will handle the calls from the frontend.

First, add the following code in the index.js file.

const express = require("express");
const app = express();
const port = 3000;

// Parse incoming JSON requests
app.use(express.json());

// In-memory storage for simplicity (replace with a database in a real application)
let expenses = [];

// Get all expenses
app.get("/expenses", (req, res) => {
 res.json(expenses);
});

// Add a new expense
app.post("/expenses", (req, res) => {
 const { description, amount } = req.body;

 if (description && !isNaN(amount)) {
   const newExpense = {
     description: description,
     amount: parseFloat(amount.toFixed(2)),
   };

   expenses.push(newExpense);
   res.status(201).json(newExpense);
 } else {
   res.status(400).json({ error: "Invalid data" });
 }
});

// Start the server
app.listen(port, () => {
 console.log(`Server is running on http://localhost:${port}`);
});
module.exports = app;

 

Finally time to deploy our project and see how it looks!

 

 

 

Gif of a digital expense tracker interface with fields for entering a description and amount, and a button labeled "add expense" below which "no expenses yet" is displayed.

 

In the next part of this series, we will be integrating Catalyst DevOps components!

Want to learn more? Book a meeting with us today!

Steve Solt headshot

Mike Dranginis is the AVP of Zoho Development at KDG. Mike is dedicated to continuous self-improvement and is constantly striving to do better than his best. This is evident in the dozens of applications he has built and the numerous clients in manufacturing, higher ed, and retail that continue to come back with new ideas and new goals.

Recent Posts
KDG logo

Discover Zoho: The Path to Innovation and Growth

Leverage our expertise as the #1 Global Zoho Partner to streamline your business processes and enhance operational efficiency.

Share this post!

Explore More: Related Insights

  • Case Study
    Custom Crowdfunding That Engaged Donors to Give 95% More
  • Case Study
    MedTech For Solutions: Healthcare Data Integration & Security
  • Article
    Mobile App Development with React Native: What It Is and What It Makes Possible