DEV Community: Julio Leiva Díaz

Automatiza la Gestión de Tickets en React 18 con Outputs Estructurados de OpenAI

Julio Leiva Díaz — Thu, 29 Aug 2024 07:03:00 +0000

En este tutorial, vamos a ver cómo integrar la nueva funcionalidad de Outputs Estructurados (Structured Outputs) de OpenAI en una aplicación de ticketing construida con React 18. Esta integración permitirá generar y asignar tickets de soporte automáticamente, basándote en las entradas de los usuarios.

Configuración del Backend con Node.js y OpenAI

Primero, configuraremos el backend usando Node.js y la API de OpenAI para manejar la generación y asignación automática de tickets.

Instalación de Dependencias

Asegúrate de tener instaladas las dependencias necesarias:

npm install express openai dotenv

Configuración de OpenAI

Crea un archivo openai.js y configura la API de OpenAI para generar tickets basados en la entrada del usuario y asignarlos automáticamente a miembros del equipo.

// openai.js
import OpenAI from 'openai';

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY // Asegúrate de tener tu API key en un archivo .env
});

// Simulación de una base de datos de miembros del equipo
const teamMembers = [
  { name: 'Alice', role: 'Support', available: true },
  { name: 'Bob', role: 'Support', available: true },
  { name: 'Charlie', role: 'Support', available: false },
];

const schema = {
  type: 'object',
  properties: {
    title: { type: 'string' },
    description: { type: 'string' },
    priority: { type: 'string', enum: ['low', 'medium', 'high'] },
    assigned_to: { type: ['string', 'null'] },
    status: { type: 'string', enum: ['open', 'in_progress', 'closed'] }
  },
  required: ['title', 'description', 'priority', 'status'],
  additionalProperties: false
};

// Función para asignar tickets automáticamente basado en disponibilidad
async function assignTicket(priority) {
  const availableMember = teamMembers.find(member => member.available);
  return availableMember ? availableMember.name : null;
}

async function generateTicket(userInput) {
  const completion = await openai.chat.completions.create({
    model: 'gpt-4o-2024-08-06',
    messages: [
      { role: 'system', content: 'You are a support ticket assistant.' },
      { role: 'user', content: userInput }
    ],
    response_format: {
      type: 'json_schema',
      json_schema: schema
    }
  });

  let ticket = completion.choices[0]?.message?.parsed || null;

  if (ticket) {
    // Asignar automáticamente el ticket
    ticket.assigned_to = await assignTicket(ticket.priority);
  }

  return ticket;
}

export { generateTicket };

Configura el Servidor Express

Ahora, configura un servidor básico con Express para manejar las solicitudes desde tu frontend React.

// server.js
import express from 'express';
import { generateTicket } from './openai';

const app = express();
app.use(express.json());

app.post('/api/generate-ticket', async (req, res) => {
  const { userInput } = req.body;
  const ticket = await generateTicket(userInput);
  res.json({ ticket });
});

app.listen(3001, () => {
  console.log('Server running on http://localhost:3001');
});

Configuración del Frontend en React 18

En el frontend, vamos a construir una sencilla interfaz en React 18 que permita a los usuarios describir su problema y generar un ticket automáticamente.

Componente de React

Crea un componente TicketingApp.js para gestionar la interfaz de usuario.

// TicketingApp.jsx
import React, { useState } from 'react';

function TicketingApp() {
  const [userInput, setUserInput] = useState('');
  const [ticket, setTicket] = useState(null);

  const handleSubmit = async (e) => {
    e.preventDefault();
    const response = await fetch('/api/generate-ticket', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ userInput })
    });
    const data = await response.json();
    setTicket(data.ticket);
  };

  return (
    <div>
      <h1>Ticketing System</h1>
      <form onSubmit={handleSubmit}>
        <textarea
          value={userInput}
          onChange={(e) => setUserInput(e.target.value)}
          placeholder="Describe your issue..."
        />
        <button type="submit">Generate Ticket</button>
      </form>

      {ticket && (
        <div>
          <h2>Generated Ticket</h2>
          <p><strong>Title:</strong> {ticket.title}</p>
          <p><strong>Description:</strong> {ticket.description}</p>
          <p><strong>Priority:</strong> {ticket.priority}</p>
          <p><strong>Status:</strong> {ticket.status}</p>
          {ticket.assigned_to && <p><strong>Assigned to:</strong> {ticket.assigned_to}</p>}
        </div>
      )}
    </div>
  );
}

export default TicketingApp;

Integración en tu Proyecto React

Asegúrate de incluir TicketingApp en tu proyecto React:

// App.jsx
import React from 'react';
import TicketingApp from './TicketingApp';

function App() {
  return (
    <div className="App">
      <TicketingApp />
    </div>
  );
}

export default App;

Conclusión

Este es solo el comienzo; trata ahora de ecalar la app expandiendo la lógica de asignación, añadiendo manejo de errores...

Replaces switch statements by objects (Literal Object look-up)

Julio Leiva Díaz — Tue, 20 Jun 2023 17:44:33 +0000

In JavaScript we spend half our lives working with objects, creating them, manipulating them, because (in case you don't know it yet)....

What is a switch statement?

A switch statement takes an input, evaluates it against a series of cases and provides an output.

A very basic example:

If we want to do something more useful we can implement this in a function:

If you notice, it is similar to the if and else statements, but it should evaluate a single value, however inside the switch we use a case to evaluate against each of the values.

When you start to see a lot of else if statements, the code starts to cry out for a switch

This implementation is error-prone, with a verbose and ugly syntax, very ugly. For the moment, the switch option is still better, but...

Problems with switch statement

Procedural and imperative control flow.
Its non-standard format for handling code blocks: the rest of JavaScript uses curly braces; switch does not.
Syntactically, it is not one of the best JavaScript statements.
We are forced to manually add break statements inside each case, which can lead to difficult debugging and nested errors if we forget to put it in.

Literal Object look-up

Let's start by creating a simple object that returns a String:

We have saved a few lines and, in my opinion, the data has a much cleaner presentation and, more importantly, it looks more like the syntax we are used to working with JavaScript. We can even simplify it further, without a default case:

Vale, muy bien, ¿y si lo que necesito es algo más complejo que evaluar un String? Bueno, pues como en JavaScript...

even the functions themselves, we can also do something like this:

I find it easier to read and maintain. Notice how by doing it this way we don't have to worry about break sentences.

Usually, we would put a switch inside a function and get a return value, so let's do the same here:

Okay, fine, but a "default" case is not being contemplated here. Okay, let's believe it:

We can simplify if and else by using the or || operator within an expression:

We don't always have to return inside the function either, we can change the references to any variable and then return it:

These are very basic solutions, and Object literals contain a function that returns a String, in case you only need a String, you could use a String as the key value - sometimes functions will contain logic, which will be returned by the function. If you are mixing functions with strings, it may be easier to use a function at all times to save you looking up the type and invoking if it is a function.

Object Literal “fall through”

We can also emulate the "fall through", typical of switch statements (which means that more than one case can apply to a specific piece of code):

We let basic and free "fall through" by not adding a break, which makes the code look simpler, more declarative and less error-prone:

Notice that we are not handling the 'default' case here, but I'm meeting to go to the movies and I'm already late, do you feel like implementing it yourself 😉.

jUpi🧑🏽💻

Proxy Pattern easy and practice

Julio Leiva Díaz — Tue, 20 Jun 2023 06:35:00 +0000

A proxy object can determine the behavior whenever we’re interacting with the object, for example when we’re getting a value, or setting a value.

We have an account object, that represents my data account:

const account = {
  name: "Julio",
  isPremium:false,
  isLogged: true
}

A user should not be able to change the login properties or the service type or assign empty values to any of the properties. We also have to check if the user is trying to access a property of the object that does not exist, and if so, inform the user about it. And it is here where it makes sense to use a proxy, which is basically a second object that is responsible for “monitoring” the interactions that are made on the original object. Something like a soccer player’s agent or a management secretary.

Instead of interacting with this object directly (soccer player or CEO) , we want to interact with a proxy object. In JavaScript, we can easily create a new proxy by creating a new instance of Proxy.

const accountProxy = new Proxy(account, {});

The second argument of Proxy is an object that represents the handler. In the handler object, we can define specific behavior based on the type of interaction. Although there are many methods that you can add to the Proxy handler, the two most common ones are get and set:

get: invoked when trying to access a property
set: invoked when trying to modify a property

Instead of interacting with the account object directly, we are going to interact with the accountProxy.

We add two handlers to the accountProxy accountProxy. The first one, the setter, will act when we try to modify a property. By invoking the set method on the Proxy, we want the proxy to register the previous value and the new value of the property. The second, the getter, will come into action when a property is accessed. When invoking the get method on the Proxy, we want the proxy to register the key and the value of the property and inform us of this through a log.

const accountProxy = new Proxy(account, {
  get: (obj, prop) => {
    console.log(`The value of ${prop} is ${obj[prop]}`);
  },
  set: (obj, prop, value) => {
    console.log(`Changed ${prop} from ${obj[prop]} to ${value}`);
    obj[prop] = value;
  }
});
accountProxy.name // The value of name is Julio
accountProxy.isPremium = true // Changed isPremium from false to true

As we have mentioned before, by using our Proxy we want to:

user should not be able to change the login properties or the service type
or assign empty values to any of the properties
and check if the user is trying to access a property of the object that does not exist, and if so, inform the user about it

const account = {
  name: "Julio",
  isPremium:false,
  isLogged:true
}
const accountProxy = new Proxy(account, {
  get: (obj, prop) => {
    if (!obj[prop]) {
      console.log(
        `This property doesn't exist on the target object`
      );
    } else {
      console.log(`The value of ${prop} is ${obj[prop]}`);
    }
  },
  set: (obj, prop, value) => {
    if (prop === "name" && typeof value !== "string") {
      console.log(`You can only pass string values for name property.`);
    } else if (prop === "name" && !value.length) {
      console.log(`You need to provide a valid name.`);
    } else if(prop === "isPremium"  && typeof value === "boolean"){
      console.log(`You can't modify ${prop} from ${obj[prop]}`);
    }
    else if(prop === "isLogged"  && typeof value === "boolean"  ){
      console.log(`You can't modify ${prop} from ${obj[prop]}`);
    }
  }
});
accountProxy.name= "" // You need to provide a valid name
accountProxy.noExistProp // This property doesn't exist on the target object
accountProxy.isPremium = true // You can't modify isPremium from false

Proxies are a powerful way to add control over the behavior of an object. A proxy can have various use-cases: it can help with validation, formatting, notifications, or debugging.

Overusing the Proxy object or performing heavy operations on each handler method invocation can easily affect the performance of your application negatively. It's best to not use proxies for performance-critical code.

Check here, in this free video from Vue Mastery (with Evan You and Gregg Pollack) how Vue 3 implements the Proxy pattern to create its reactivity system. It’s wonderful 👌

I hope you found this article useful.

Optimise your performance with memoization

Julio Leiva Díaz — Tue, 20 Jun 2023 06:02:00 +0000

Memoization allows us to increase the performance of a function by caching its previously computed results.
Since JavaScript objects behave like associative arrays, they are ideal for use as caches. Whenever a memoised function is called, its parameters are used to index the cache. If data is present, then it can be returned, without executing the entire function. However, if the data is not in the cache, then the function is executed and the result is added to the cache.

const fancyMemo = () => {
        let cacheStore = {};
        return (value) => {
            if (value in cacheStore) {
                console.log('Retriving from cache');
                return cacheStore[value];
            } else {
                console.log('Calculating...');
                let result = [...new Array(value).keys()]
                cacheStore[value] = result
                return result;
            }
        }
}

const newMemo = fancyMemo();
console.time('First call')
newMemo(100000) // The first time all the calculation will be done...
console.timeEnd('First call')
console.time('Second call')
newMemo(100000) // The second time the value stored in the cache will be returned
console.timeEnd('Second call')

As you can see in the example, the first execution takes
7.97607421875 ms, while the second one takes much less time to execute because it is making use of the cache.

Memorization is a programming technique widely used in the most used frameworks and libraries, so it is advisable to know it from its basic and native implementation.

I hope you found it useful.